谷歌地图 API 添加形状

最近加班真是累成狗啊，每天10点之后下班。还有其余的事情，总之都是要死要死的感受，苦逼的程序员。
谷歌地图形状官网：https://developers.google.com...javascript

简介

您能够向地图添加各类形状。形状是地图上与某个纬度/经度坐标绑定的对象。可用的形状以下：线、多边形、圆和矩形。您还能够将形状配置为可供用户进行编辑或拖动。java

多段线

如需在地图上绘制线，请使用多段线。 Polyline 类在地图上定义线性相连线段叠层。Polyline 对象包含一个 LatLng 位置数组，它建立的一系列线段以有序方式将这些位置链接起来。程序员

1. 添加多段线数组

Polyline 构造函数带有一组用于指定线的 LatLng 坐标的 PolylineOptions，以及一组用于调整多段线视觉行为的样式。mvc

Polyline 对象在地图上绘制为一系列直线线段。您能够在构建线时在PolylineOptions 内指定线描边的自定义颜色、粗细和不透明度，也可在构建后更改这些属性。多段线支持下列描边样式：app

• strokeColor 指定 "#FFFFFF" 格式的十六进制 HTML 颜色。Polyline 类不支持命名颜色。ide

• strokeOpacity 指定一个介于 0.0 和 1.0 的数值，用于肯定线颜色的不透明度。默认值为 1.0。函数

• strokeWeight 指定线的宽度（单位：像素）。动画

  多段线的 editable 属性指定用户是否能够编辑形状。请参阅下文的用户可编辑形状。同理，您也能够经过设置 draggable 属性来容许用户拖动线。this

//此示例建立一个2-pixel-wide红色线显示的路径威廉的第一次跨越太平洋的飞行，途经奥克兰、CA、布里斯班、澳大利亚。
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 0, lng: -180},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  var flightPlanCoordinates = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}

2. 移除多段线

如需移除地图中的多段线，请调用 setMap() 方法，并传递 null 做为其自变量。在下例中，flightPath 是一个多段线对象：

`flightPath.setMap(null);`
        // This example adds a UI control allowing users to remove the polyline from the map.
    
    var flightPath;
    var map;
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        zoom: 3,
        center: {lat: 0, lng: -180},
        mapTypeId: google.maps.MapTypeId.TERRAIN
      });
    
      var flightPathCoordinates = [
        {lat: 37.772, lng: -122.214},
        {lat: 21.291, lng: -157.821},
        {lat: -18.142, lng: 178.431},
        {lat: -27.467, lng: 153.027}
      ];
    
      flightPath = new google.maps.Polyline({
        path: flightPathCoordinates,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
      });
    
      addLine();
    }
    
    function addLine() {
      flightPath.setMap(map);
    }
    
    function removeLine() {
      flightPath.setMap(null);
    }

3. 检查多段线

多段线以 LatLng 对象数组形式指定一系列坐标。这些坐标决定线的路径。如需检索这些坐标，请调用 getPath()，后者将返回 MVCArray 类型的数组。您能够利用下列操做操纵和检查该数组：

• getAt() 返回给定以零为起点索引值处的 LatLng

• insertAt() 在给定以零为起点索引值处插入传递的 LatLng。请注意，该索引值处的任何现有坐标都将前移

• removeAt() 移除给定以零为起点索引值处的 LatLng

注：不能直接利用 mvcArray[i] 语法检索数组的第 i 个元素。您必须使用 mvcArray.getAt(i)。

// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.

var poly;
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {lat: 41.879, lng: -87.624}  // Center the map on Chicago, USA.
  });

  poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
  poly.setMap(map);

  // Add a listener for the click event
  map.addListener('click', addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

  // Add a new marker at the new plotted point on the polyline.
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });
}

4. 定制多段线

能够向多段线添加符号形式的基于矢量的图像。您能够经过组合使用符号和 PolylineOptions 类对地图上多段线的外观进行充分的控制。请参阅符号，了解有关箭头、虚线、自定义符号及动画符号的信息。

多边形

多边形表示由闭合路径（或环路）封闭的区域，由一系列坐标定义。Polygon 对象与 Polyline 对象相似，由于它们都包含一系列有序的坐标。多边形使用描边和填充区绘制。您能够为多边形边缘（描边）定义自定义颜色、粗细和不透明度，以及为封闭区域（填充区）定义自定义颜色和不透明度。颜色应以十六进制 HTML 格式表示。不支持颜色名称。

Polygon 对象可描述复杂形状，其中包括：

• 由单个多边形定义的多个不连续区域

  • 带孔的区域

  • 一个或多个区域的交集

1. 添加多变形

因为多边形区域可能包括几个不一样路径，所以 Polygon 对象的 paths 属性指定的是数组的数组，每一个数组的类型均为 MVCArray。每一个数组定义的都是不一样的有序 LatLng 坐标序列。

对于只包括一个路径的简单多边形，您能够利用单个 LatLng 坐标数组构建 Polygon。构建时，Google Maps JavaScript API 将在于 paths 属性内存储该简单数组时将其转换成数组的数组。API 为包括一个路径的多边形提供了一个简单的 getPath() 方法。

注：若是您以这种方式构建一个简单的多边形，仍需经过以 MVCArray 形式操纵路径来检索多边形的值。

多边形的 editable 属性指定用户是否能够编辑形状。请参阅下文的用户可编辑形状。同理，您也能够经过设置 draggable 属性来容许用户拖动形状。

// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 5,
        center: {
            lat: 24.886,
            lng: -70.268
        },
        mapTypeId: google.maps.MapTypeId.TERRAIN
    });

    // Define the LatLng coordinates for the polygon's path.
    var triangleCoords = [{
        lat: 25.774,
        lng: -80.190
    }, {
        lat: 18.466,
        lng: -66.118
    }, {
        lat: 32.321,
        lng: -64.757
    }, {
        lat: 25.774,
        lng: -80.190
    }];

    // Construct the polygon.
    var bermudaTriangle = new google.maps.Polygon({
        paths: triangleCoords,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
    });
    bermudaTriangle.setMap(map);
}

上例中的 Polygon 包含四组 LatLng 坐标，但请注意第一组坐标和最后一组坐标定义的位置相同，该位置用于完成环路。但在实践中，因为多边形定义的是封闭区域，所以您无需定指定最后一组坐标。Google Maps JavaScript API 将经过绘制一笔，将任何给定路径的最后一个位置连回第一个位置，自动完成多边形。

2. 移除多边形

如需移除地图中的多边形，请调用 setMap() 方法，并传递 null 做为其自变量。在下例中，bermudaTriangle 是一个多边形对象：

bermudaTriangle.setMap(null);

3. 检查多边形

多边形以数组的数组形式指定其坐标系列，其中每一个数组的类型均为 MVCArray。每一个“叶”数组都是一个指定单个路径的 LatLng 坐标数组。如需检索这些坐标，请调用 Polygon 对象的 getPaths() 方法。因为该数组是 MVCArray，您须要利用下列操做操纵和检查该数组：

• getAt() 返回给定以零为起点索引值处的 LatLng

• insertAt() 在给定以零为起点索引值处插入传递的 LatLng。请注意，该索引值处的任何现有坐标都将前移

• removeAt() 移除给定以零为起点索引值处的 LatLng

矩形

除了 Polygon 泛型类外，Google Maps JavaScript API 还提供了专供 Rectangle 对象简化其结构的类。

1. 添加矩形

Rectangle 与 Polygon 相似，您也能够为矩形边缘（描边）定义自定义颜色、粗细和不透明度，以及为矩形内区域（填充区）定义自定义颜色和不透明度。颜色应以十六进制数值 HTML 样式表示。

与 Polygon 不一样的是，您无需为 Rectangle 定义 paths。与多边形不一样，矩形具备一个 bounds 属性，经过为矩形指定 google.maps.LatLngBounds 来定义其形状。

矩形的 editable 属性指定用户是否能够编辑形状。请参阅下文的用户可编辑形状。同理，您也能够经过设置 draggable 属性来容许用户拖动矩形。

// This example adds a red rectangle to a map.
function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 11,
        center: {
            lat: 33.678,
            lng: -116.243
        },
        mapTypeId: google.maps.MapTypeId.TERRAIN
    });

    var rectangle = new google.maps.Rectangle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map,
        bounds: {
            north: 33.685,
            south: 33.671,
            east: -116.234,
            west: -116.251
        }
    });
}

2. 移除矩形

如需移除地图中的矩形，请调用 setMap() 方法，并传递 null 做为其自变量。

rectangle.setMap(null);

请注意，以上方法不会删除矩形，而只是从地图中移除矩形。若是您其实是想删除矩形，则应先将其从地图中移除，而后将矩形自己设置为 null。

圆

除了 Polygon 泛型类外，Google Maps JavaScript API 还提供了专供 Circle 对象简化其结构的类。

1. 添加圆

Circle 与 Polygon 相似，您也能够为圆的边缘（描边）定义自定义颜色、粗细和不透明度，以及为圆内区域（填充区）定义自定义颜色和不透明度。颜色应以十六进制数值 HTML 样式表示。

与 Polygon 不一样的是，您无需为 Circle 定义 paths。圆具备两个额外的形状定义属性：

• center 指定圆中心的 google.maps.LatLng

• radius 指定圆的半径（单位：米）

  圆的 editable 属性指定用户是否能够编辑形状。请参阅下文的用户可编辑形状。同理，您也能够经过设置 draggable 属性来容许用户拖动圆。

// This example creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.
var citymap = {
  chicago: {
    center: {lat: 41.878, lng: -87.629},
    population: 2714856
  },
  newyork: {
    center: {lat: 40.714, lng: -74.005},
    population: 8405837
  },
  losangeles: {
    center: {lat: 34.052, lng: -118.243},
    population: 3857799
  },
  vancouver: {
    center: {lat: 49.25, lng: -123.1},
    population: 603502
  }
};

function initMap() {
  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 37.090, lng: -95.712},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    });
  }
}

2. 移除园

如需移除地图中的圆，请调用 setMap() 方法，并传递 null 做为其自变量。

circle.setMap(null);

请注意，以上方法不会删除圆，而只是从地图中移除圆。若是您其实是想删除圆，则应先将其从地图中移除，而后将圆自己设置为 null。

可由用户编辑和拖动的形状

将形状设置为可编辑会给形状添加手柄，用户能够利用手柄直接在地图上对形状进行位置调整、从新塑形和尺寸调整。您还能够将形状设置为可拖动，以便用户将其移至地图上的其余地点。

用户对对象作出的更改没法跨会话存留。若是您想保存用户的编辑，必须自行采集和存储信息。

1. 将形状设置为可编辑

可经过在形状的选项中将 editable 设置为 true，将任何形状（多段线、多边形、圆和矩形）设置为可由用户编辑。

2. 将形状设置为可拖动

默认状况下，在地图上绘制的形状位置固定。如需容许用户将形状拖动到地图上的其余位置，请在形状的选项中将 draggable 设置为 true。

3. 侦听编辑事件

编辑形状时，会在编辑完成时触发事件。下面列出了这些事件。

一些相关的代码段：

google.maps.event.addListener(circle, 'radius_changed', function() {
  console.log(circle.getRadius());
});

google.maps.event.addListener(outerPath, 'set_at', function() {
  console.log('Vertex moved on outer path.');
});

google.maps.event.addListener(innerPath, 'insert_at', function() {
  console.log('Vertex removed from inner path.');
});

google.maps.event.addListener(rectangle, 'bounds_changed', function() {
  console.log('Bounds changed.');
});

4. 侦听拖动事件

拖动形状时，会在拖动操做开始和结束时以及拖动期间触发事件。对于多段线、多边形、圆和矩形，将会触发下列事件。

如需了解更多关于处理事件的内容，请参阅[有关事件的文档][2]。


 


  [1]: https://developers.google.com/maps/documentation/javascript/symbols