谷歌地图API添加形状

简介

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

多段线

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

1. 添加多段线

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

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

• strokeColor 指定 "#FFFFFF" 格式的十六进制 HTML 颜色。Polyline 类不支持命名颜色。
• strokeOpacity 指定一个介于 0.0 和 1.0 的数值，用于确定线颜色的不透明度。默认值为 1.0。
• strokeWeight 指定线的宽度(单位：像素)。
  多段线的 editable 属性指定用户是否可以编辑形状。请参阅下文的用户可编辑形状。同理，您也可以通过设置 draggable 属性来允许用户拖动线。 

1. //此示例创建一个2-pixel-wide红色线显示的路径威廉的第一次跨越太平洋的飞行，途经奥克兰、CA、布里斯班、澳大利亚。 
2. unction initMap() { 
3.  var map = new google.maps.Map(document.getElementById('map'), { 
4.    zoom: 3, 
5.    center: {lat: 0, lng: -180}, 
6.    mapTypeId: google.maps.MapTypeId.TERRAIN 
7.  }); 
8.  
9.  var flightPlanCoordinates = [ 
10.    {lat: 37.772, lng: -122.214}, 
11.    {lat: 21.291, lng: -157.821}, 
12.    {lat: -18.142, lng: 178.431}, 
13.    {lat: -27.467, lng: 153.027} 
14.  ]; 
15.  var flightPath = new google.maps.Polyline({ 
16.    path: flightPlanCoordinates, 
17.    geodesic: true, 
18.    strokeColor: '#FF0000', 
19.    strokeOpacity: 1.0, 
20.    strokeWeight: 2 
21.  }); 
22.  
23.  flightPath.setMap(map); 
24.     

2. 移除多段线

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

1. `flightPath.setMap(null);` 
2.         // This example adds a UI control allowing users to remove the polyline from the map. 
3.      
4.     var flightPath; 
5.     var map; 
6.     function initMap() { 
7.       map = new google.maps.Map(document.getElementById('map'), { 
8.         zoom: 3, 
9.         center: {lat: 0, lng: -180}, 
10.         mapTypeId: google.maps.MapTypeId.TERRAIN 
11.       }); 
12.      
13.       var flightPathCoordinates = [ 
14.         {lat: 37.772, lng: -122.214}, 
15.         {lat: 21.291, lng: -157.821}, 
16.         {lat: -18.142, lng: 178.431}, 
17.         {lat: -27.467, lng: 153.027} 
18.       ]; 
19.      
20.       flightPath = new google.maps.Polyline({ 
21.         path: flightPathCoordinates, 
22.         strokeColor: '#FF0000', 
23.         strokeOpacity: 1.0, 
24.         strokeWeight: 2 
25.       }); 
26.      
27.       addLine(); 
28.     } 
29.      
30.     function addLine() { 
31.       flightPath.setMap(map); 
32.     } 
33.      
34.     function removeLine() { 
35.       flightPath.setMap(null); 
36.     }   

3. 检查多段线

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

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

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

1. // This example creates an interactive map which constructs a polyline based on 
2. // user clicks. Note that the polyline only appears once its path property 
3. // contains two LatLng coordinates. 
4.  
5. var poly; 
6. var map; 
7.  
8. function initMap() { 
9.   map = new google.maps.Map(document.getElementById('map'), { 
10.     zoom: 7, 
11.     center: {lat: 41.879, lng: -87.624}  // Center the map on Chicago, USA. 
12.   }); 
13.  
14.   poly = new google.maps.Polyline({ 
15.     strokeColor: '#000000', 
16.     strokeOpacity: 1.0, 
17.     strokeWeight: 3 
18.   }); 
19.   poly.setMap(map); 
20.  
21.   // Add a listener for the click event 
22.   map.addListener('click', addLatLng); 
23. } 
24.  
25. // Handles click events on a map, and adds a new point to the Polyline. 
26. function addLatLng(event) { 
27.   var path = poly.getPath(); 
28.  
29.   // Because path is an MVCArray, we can simply append a new coordinate 
30.   // and it will automatically appear. 
31.   path.push(event.latLng); 
32.  
33.   // Add a new marker at the new plotted point on the polyline. 
34.   var marker = new google.maps.Marker({ 
35.     position: event.latLng, 
36.     title: '#' + path.getLength(), 
37.     map: map 
38.   }); 
39. }   

4. 定制多段线

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

多边形

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

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

• 由单个多边形定义的多个不连续区域
  带孔的区域
  一个或多个区域的交集

1. 添加多变形

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

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

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

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

1. // This example creates a simple polygon representing the Bermuda Triangle. 
2. function initMap() { 
3.     var map = new google.maps.Map(document.getElementById('map'), { 
4.         zoom: 5, 
5.         center: { 
6.             lat: 24.886, 
7.             lng: -70.268 
8.         }, 
9.         mapTypeId: google.maps.MapTypeId.TERRAIN 
10.     }); 
11.  
12.     // Define the LatLng coordinates for the polygon's path. 
13.     var triangleCoords = [{ 
14.         lat: 25.774, 
15.         lng: -80.190 
16.     }, { 
17.         lat: 18.466, 
18.         lng: -66.118 
19.     }, { 
20.         lat: 32.321, 
21.         lng: -64.757 
22.     }, { 
23.         lat: 25.774, 
24.         lng: -80.190 
25.     }]; 
26.  
27.     // Construct the polygon. 
28.     var bermudaTriangle = new google.maps.Polygon({ 
29.         paths: triangleCoords, 
30.         strokeColor: '#FF0000', 
31.         strokeOpacity: 0.8, 
32.         strokeWeight: 2, 
33.         fillColor: '#FF0000', 
34.         fillOpacity: 0.35 
35.     }); 
36.     bermudaTriangle.setMap(map); 
37. }  

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

2. 移除多边形

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

1. 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 属性来允许用户拖动矩形。

1. // This example adds a red rectangle to a map. 
2. function initMap() { 
3.     var map = new google.maps.Map(document.getElementById('map'), { 
4.         zoom: 11, 
5.         center: { 
6.             lat: 33.678, 
7.             lng: -116.243 
8.         }, 
9.         mapTypeId: google.maps.MapTypeId.TERRAIN 
10.     }); 
11.  
12.     var rectangle = new google.maps.Rectangle({ 
13.         strokeColor: '#FF0000', 
14.         strokeOpacity: 0.8, 
15.         strokeWeight: 2, 
16.         fillColor: '#FF0000', 
17.         fillOpacity: 0.35, 
18.         map: map, 
19.         bounds: { 
20.             north: 33.685, 
21.             south: 33.671, 
22.             east: -116.234, 
23.             west: -116.251 
24.         } 
25.     }); 
26. }  

2. 移除矩形

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

1. rectangle.setMap(null); 

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

圆

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

1. 添加圆

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

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

• center 指定圆中心的 google.maps.LatLng
• radius 指定圆的半径(单位：米)
  圆的 editable 属性指定用户是否可以编辑形状。请参阅下文的用户可编辑形状。同理，您也可以通过设置 draggable 属性来允许用户拖动圆。

1. // This example creates circles on the map, representing populations in North 
2. // America. 
3.  
4. // First, create an object containing LatLng and population for each city. 
5. var citymap = { 
6.   chicago: { 
7.     center: {lat: 41.878, lng: -87.629}, 
8.     population: 2714856 
9.   }, 
10.   newyork: { 
11.     center: {lat: 40.714, lng: -74.005}, 
12.     population: 8405837 
13.   }, 
14.   losangeles: { 
15.     center: {lat: 34.052, lng: -118.243}, 
16.     population: 3857799 
17.   }, 
18.   vancouver: { 
19.     center: {lat: 49.25, lng: -123.1}, 
20.     population: 603502 
21.   } 
22. }; 
23.  
24. function initMap() { 
25.   // Create the map. 
26.   var map = new google.maps.Map(document.getElementById('map'), { 
27.     zoom: 4, 
28.     center: {lat: 37.090, lng: -95.712}, 
29.     mapTypeId: google.maps.MapTypeId.TERRAIN 
30.   }); 
31.  
32.   // Construct the circle for each value in citymap. 
33.   // Note: We scale the area of the circle based on the population. 
34.   for (var city in citymap) { 
35.     // Add the circle for this city to the map. 
36.     var cityCircle = new google.maps.Circle({ 
37.       strokeColor: '#FF0000', 
38.       strokeOpacity: 0.8, 
39.       strokeWeight: 2, 
40.       fillColor: '#FF0000', 
41.       fillOpacity: 0.35, 
42.       map: map, 
43.       center: citymap[city].center, 
44.       radius: Math.sqrt(citymap[city].population) * 100 
45.     }); 
46.   } 
47. }   

2. 移除园

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

1. circle.setMap(null); 

请注意，以上方法不会删除圆，而只是从地图中移除圆。如果您实际上是想删除圆，则应先将其从地图中移除，然后将圆本身设置为 null。

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

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

用户对对象做出的更改无法跨会话存留。如果您想保存用户的编辑，必须自行采集和存储信息。

1. 将形状设置为可编辑

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

2. 将形状设置为可拖动

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

3. 侦听编辑事件

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

一些相关的代码段：

1. google.maps.event.addListener(circle, 'radius_changed', function() { 
2.   console.log(circle.getRadius()); 
3. }); 
4.  
5. google.maps.event.addListener(outerPath, 'set_at', function() { 
6.   console.log('Vertex moved on outer path.'); 
7. }); 
8.  
9. google.maps.event.addListener(innerPath, 'insert_at', function() { 
10.   console.log('Vertex removed from inner path.'); 
11. }); 
12.  
13. google.maps.event.addListener(rectangle, 'bounds_changed', function() { 
14.   console.log('Bounds changed.'); 
15. });  

4. 侦听拖动事件

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

作者：旅图灬

来源：51CTO