谷歌地图API添加形状

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

 

[[170684]]

简介

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

多段线

如需在地图上绘制线,请使用多段线。 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. // Handles click events on a map, and adds a new point to the Polyline. 
  25. function addLatLng(event) { 
  26.   var path = poly.getPath(); 
  27.  
  28.   // Because path is an MVCArray, we can simply append a new coordinate 
  29.   // and it will automatically appear. 
  30.   path.push(event.latLng); 
  31.  
  32.   // Add a new marker at the new plotted point on the polyline. 
  33.   var marker = new google.maps.Marker({ 
  34.     position: event.latLng, 
  35.     title: '#' + path.getLength(), 
  36.     map: map 
  37.   }); 
  38. }   

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. // Firstcreate 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. 侦听编辑事件

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

形状 事件
radius_changed、center_changed
多边形 insert_at、remove_at、set_at,必须在多边形的路径上设置侦听器,如果多边形有多个路径,必须在每个路径上设置侦听器
多段线 insert_at、remove_at、set_at,必须在多段线的路径上设置侦听器
矩形 bounds_changed

一些相关的代码段:

  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. 侦听拖动事件

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

事件 说明
dragstart 当用户开始拖动形状时触发
drag 在用户拖动形状期间反复触发
dragend 当用户停止拖动形状时触发
责任编辑:庞桂玉 来源: segmentfault
相关推荐

2012-09-18 13:13:17

2011-11-02 17:31:58

Maps API

2011-10-28 10:04:18

API

2013-05-31 10:33:51

2012-12-18 09:51:53

谷歌地图苹果地图

2011-09-29 11:00:54

百度地图API

2012-06-12 09:50:13

苹果WWDC地图

2013-04-26 10:26:08

2009-05-26 16:39:49

2011-10-21 09:11:41

百度地图API

2012-12-14 09:31:19

2011-09-16 10:37:42

地图API

2011-05-07 09:21:47

必应地图iOS谷歌地图

2011-11-30 15:51:57

2010-09-02 09:34:47

谷歌地图付费Logo

2012-05-16 18:21:27

2014-12-08 12:50:24

Android AutGoogle

2011-10-09 11:07:40

百度地图API

2011-05-28 11:59:20

iOS苹果谷歌地图

2022-04-12 14:09:40

人工智能谷歌地图
点赞
收藏

51CTO技术栈公众号