开发者社区> 行者武松> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

谷歌地图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. // 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 当用户停止拖动形状时触发



作者:旅图灬

来源:51CTO

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
App如何防止抓包
App安全非常重要,尤其是数据安全。但是我们知道通过Charles等工具可以对App的网络请求进行抓包,如果我们的数据没有进行加密,这样这些信息就会被清楚的提取出来,会被不法分子进行利用。保证数据安全有很多种方法,今天简单聊一聊如何通过简单几步防止抓包。
427 0
阿里云API场景化平台正式上线
2020新年伊始“阿里云开放平台官网官网”发布上线!官网重磅推出场景化实践平台、全量阿里云API服务以及众多开发集成工具,全面支持用户、生态合作伙伴基于阿里云操作系统简单、高效地开展业务。
1214 0
阿里云API场景化平台正式上线
2020新年伊始“阿里云开放平台官网官网”发布上线!官网重磅推出场景化实践平台、全量阿里云API服务以及众多开发集成工具,全面支持用户、生态合作伙伴基于阿里云操作系统简单、高效地开展业务。
698 0
2019阿里云峰会-边缘计算专场,邀您共话大连接低时延场景下的技术探索与实践
随着视频大量应用、万物智联时代的到来,云计算将发展到下一个技术阶段,如何满足新一代的计算、传输需求,本论坛多位行业专家将在MEC、IoT、视频、AI等多个方向,分享边缘计算最新技术探索和实践,并对阿里云ENS2.0及视频监控等新品进行详细解读。
6837 0
百度地图API显示多个标注点并添加百度样式检索窗口
  1 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
1237 0
谷歌调试工具祝你一臂之力买火车票,简单安全方便
说起买火车票,虽然有各种抢票工具,但是出于个人信息安全角度考虑的还是纯手工抢票较为安全 今年12306 改进了用户体验,多了个这东西,开始我还以为真的是改进体验了,就在那里等。。。。。。, 直到我用谷歌调试工具,才发现原来是各种报错,和各种超时,各种跨域, 希望大家不要被假象所迷惑了,那个...
590 0
Delphi中MIDAS程序的实例化模型种类(MIDAS之三)
Delphi中MIDAS应用程序COM服务器实例化模型种类  (1)Internal Instance     创建一个In-Process的COM程序,即DLL服务器.
752 0
+关注
行者武松
杀人者,打虎武松也。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
复杂环境下的视觉同时定位与地图构建
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载