Google 地图 API V3 之叠加层-白红宇

Google 地图 API V3 之叠加层

阅读量：5086 次

发布时间：2019-06-13

本文共 24085 字，大约阅读时间需要 80 分钟。

Google官方教程：

叠加层概述

叠加层是地图上与纬度/经度坐标绑定的对象，会随您拖动或缩放地图而移动。叠加层表示的是“添加”到地图中以标明点、线、区域或对象集合的对象。

Maps API 包含以下几种叠加层：

地图上的单个位置是使用标记显示的。标记有时可显示自定义的图标图片，这种情况下标记通常被称为“图标”。标记和图标是 Marker 类型的对象。（有关详情，请参阅下面的和。）

地图上的线是使用折线（表示一系列按顺序排列的位置）显示的。线是 Polyline 类型的对象。（有关详情，请参阅。）

地图上的不规则形状区域是使用多边形（类似于折线）显示的。与折线相同的是，多边形也是由一系列按顺序排列的位置构成的；不同的是，多边形定义的是封闭区域。（有关详情，请参阅下面的。）

地图图层可使用叠加层地图类型显示。您可以通过创建自定义地图类型来创建自己的图块集，自定义地图类型可取代基本地图图块集，或作为叠加层显示在现有基本地图图块集之上。（有关详情，请参阅。）

信息窗口也是特殊类型的叠加层，用于在指定地图位置上方的弹出式气泡框内显示内容（通常是文字或图片）。（有关详情，请参阅。）

您还可以实现自己的自定义叠加层。这些自定义叠加层可实现 OverlayView 接口。（有关详情，请参阅。）

添加叠加层

叠加层通常在构造时添加到地图中。所有叠加层都会定义构造中所用的 Options 对象，以指定应显示叠加层的地图。您也可以使用叠加层的 setMap() 方法向其传递要添加叠加层的地图，从而直接在该地图上添加叠加层。

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);  var mapOptions = {    zoom: 4,    center: myLatlng,    mapTypeId: google.maps.MapTypeId.ROADMAP,  }  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);    var marker = new google.maps.Marker({      position: myLatlng,      title:"Hello World!"  });    // To add the marker to the map, call setMap();  marker.setMap(map);

移除叠加层

要从地图上移除叠加层，请调用叠加层的 setMap() 方法传递 null。请注意，调用此方法不会删除叠加层，而只是将其从地图上移除。要删除叠加层，您应当先从地图上移除该叠加层，然后将其设为 null。

要管理一组叠加层，您应当创建一个数组以存储这些叠加层。利用该数组，当您需要移除叠加层时，就可以对该数组中的各个叠加层调用 setMap()。（请注意，与 V2 不同，该版本中未提供 clearOverlays() 方法；您需要自行跟踪叠加层并在不需要时将其从地图移除。）您可以从地图移除叠加层并将相应数组的 length 设为 0（此操作会移除对叠加层的所有引用），从而删除该叠加层。

以下示例会在点击地图时将标记放在地图上，然后将标记放入数组中。叠加层可在稍后清除、显示或删除：

var map;  var markersArray = [];    function initialize() {    var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);    var mapOptions = {      zoom: 12,      center: haightAshbury,      mapTypeId: google.maps.MapTypeId.TERRAIN    };    map =  new google.maps.Map(document.getElementById("map_canvas"), mapOptions);      google.maps.event.addListener(map, 'click', function(event) {      addMarker(event.latLng);    });  }    function addMarker(location) {    marker = new google.maps.Marker({      position: location,      map: map    });    markersArray.push(marker);  }    // Removes the overlays from the map, but keeps them in the array  function clearOverlays() {    if (markersArray) {      for (i in markersArray) {        markersArray[i].setMap(null);      }    }  }    // Shows any overlays currently in the array  function showOverlays() {    if (markersArray) {      for (i in markersArray) {        markersArray[i].setMap(map);      }    }  }    // Deletes all markers in the array by removing references to them  function deleteOverlays() {    if (markersArray) {      for (i in markersArray) {        markersArray[i].setMap(null);      }      markersArray.length = 0;    }  }

符号

是基于矢量的图片，可显示在 Marker 或 Polyline 对象上。符号是通过路径（使用）和一些用于控制符号显示方式的选项来定义的。一些可通过类提供。 path 是唯一必需的属性，而 Symbol 类支持多种属性，可让您自定义显示方面的设置（例如笔触、填充颜色和粗细）。

要详细了解如何在线段上显示符号或为符号添加动画效果，请参阅关于的文档。要详细了解如何使用符号作为标记图片，请参阅下面关于的文档。

Symbol 类支持以下属性。请注意，显示在标记和折线上的 Symbol 的行为会略有不同。

path（必填），表示用于定义符号形状的路径。您可以使用中预定义的某个路径，也可以使用定义自定义路径。注意：折线上的矢量路径不得超过 22x22 像素的方形范围。如果您的路径中包含超出此范围的点，那么您必须将 scale 属性调整为分数值（如 0.2），以使调整后的点处于该方形范围内。

anchor，表示符号相对于标记或折线的位置。符号路径的坐标分别由锚定点的 x 坐标和 y 坐标向左和向上进行转换。默认情况下，符号锚定在 (0, 0)。表示该位置的坐标系与符号路径的坐标系相同。

fillColor，表示符号的填充色。支持所有 CSS3 颜色，扩展命名的颜色除外。对于符号标记，默认颜色为“黑色”。对于折线上的符号，默认颜色为相应折线的笔触颜色。

fillOpacity，以 0 到 1 之间的数字表示符号填充的透明度。默认值为 0。

rotation，以顺时针的读数表示旋转符号的角度。默认情况下，符号标记的旋转角度为 0，而折线上的符号按其所在一边的角度旋转。设置折线上符号的旋转会固定符号的旋转，这样符号就不会再沿着曲线移动了。

scale，表示符号大小缩放的数值。对于符号标记，默认值为 1；符号在缩放后可能为任意大小。对于折线上的符号，默认值为折线的笔触粗细；经过缩放后，符号必须位于 22x22 像素的方形范围内（以符号的锚定点为中心）。

strokeColor，表示符号的笔触颜色。支持所有 CSS3 颜色，扩展命名的颜色除外。对于符号标记，默认颜色为“黑色”。对于折线上的符号，默认颜色为折线的笔触颜色。

strokeOpacity，以 0 到 1 之间的数字表示符号笔触的透明度。对于符号标记，默认值为 1。对于折线上的符号，默认透明度为折线的透明度。

strokeWeight，表示符号的笔触粗细。默认值为符号的 scale。

以下示例创建了一个星行符号，填充颜色为淡黄色，边框为深黄色。

var goldStar = {    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',    fillColor: "yellow",    fillOpacity: 0.8,    scale: 1,    strokeColor: "gold",    strokeWeight: 14  };    var marker = new google.maps.Marker({    position: new google.maps.LatLng(-25.363, 131.044),    icon: goldStar,    map: map  });

预定义路径

Google Maps JavaScript API 提供了一些内置符号，可在标记或折线上显示。默认符号包含一个圆形和两种箭头。由于折线上符号的方向是固定的，因此向前和向后的箭头都可以使用。向前是指折线的终点方向。包含的符号如下：

名称	说明	示例
`google.maps.SymbolPath.CIRCLE`	圆形。
`google.maps.SymbolPath.BACKWARD_CLOSED_ARROW`	各边封闭的向后箭头。
`google.maps.SymbolPath.FORWARD_CLOSED_ARROW`	各边封闭的向前箭头。
`google.maps.SymbolPath.BACKWARD_OPEN_ARROW`	一边开放的向后箭头。
`google.maps.SymbolPath.FORWARD_OPEN_ARROW`	一边开放的向前箭头。

您可以使用任意默认符号选项修改预定义符号的笔触或填充。

标记

标记用于标识地图上的位置。默认情况下，标记会使用标准图标，不过您可以在标记的构造函数中或者通过对标记调用 setIcon() 来设置一个自定义图标。google.maps.Marker构造函数采用一个 Marker options 对象常量来指定标记的初始属性。以下字段尤为重要，且通常应在您构造标记时进行设置：

position（必填），用于指定可标识标记初始位置的 LatLng。

map（可选），用于指定要在其上设置标记的 Map 对象。

请注意，您应在 Marker 构造函数内指定要在哪个地图上添加标记。如果您未指定此参数，就只能创建标记，而无法将其附加到地图上（或在地图上显示）。稍后，您可以调用标记的 setMap() 方法以添加该标记。要移除标记，请调用 setMap() 方法并传递 null 作为其参数。

标记为可交互式。例如在默认情况下，标记可接收 'click' 事件，且通常用于在事件监听器打开信息窗口。将某个标记的 draggable 属性设为 true 可使该标记在地图上。

以下示例将一个简单的标记添加到澳大利亚中心区域的乌鲁鲁的地图上：

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);    var mapOptions = {      zoom: 4,      center: myLatlng,      mapTypeId: google.maps.MapTypeId.ROADMAP    }    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);      var marker = new google.maps.Marker({        position: myLatlng,        map: map,        title:"Hello World!"    });

此 Marker 标题将会显示为工具提示。

如果您不想在标记的构造函数中传递任何 Marker options，请在相应构造函数的最后一个参数中传递一个空对象 {}。

动画

您也可以对标记添加动画效果，以便它们在各种不同的环境中展现动态活动。标记的 animation 属性（类型为 google.maps.Animation）中指定了用于为标记添加动画的方法。系统目前支持以下 Animation 值：

DROP，用于表示标记在首次放置于地图上时，应当从地图顶端落到目标位置。动画将会随着标记的停止而结束，且 animation 将会还原为 null。通常，此类动画会在创建 Marker 的过程中进行指定。

BOUNCE，用于表示标记应在相应的位置上“弹跳”。在您将弹跳标记的 animation 属性明确设为 null 之前，该标记会不断弹跳。

您可以对 Marker 对象调用 setAnimation()，以对现有标记添加动画效果。

以下示例在瑞典斯德哥尔摩市创建了一个采用 DROP 动画的标记。点击该标记即可使其在 BOUNCE 动画和无动画之间切换：

var stockholm = new google.maps.LatLng(59.32522, 18.07002);  var parliament = new google.maps.LatLng(59.327383, 18.06747);  var marker;  var map;    function initialize() {    var mapOptions = {      zoom: 13,      mapTypeId: google.maps.MapTypeId.ROADMAP,      center: stockholm    };      map = new google.maps.Map(document.getElementById("map_canvas"),        mapOptions);      marker = new google.maps.Marker({      map:map,      draggable:true,      animation: google.maps.Animation.DROP,      position: parliament    });    google.maps.event.addListener(marker, 'click', toggleBounce);  }    function toggleBounce() {      if (marker.getAnimation() != null) {      marker.setAnimation(null);    } else {      marker.setAnimation(google.maps.Animation.BOUNCE);    }  }

请注意：如果您有很多标记，则不应让所有标记同时掉落到地图上。您可以利用 setTimeout()，使用某种模式（类似于以下所示模式）来间隔显示标记的动画效果：

function drop() {    for (var i =0; i < markerArray.length; i++) {      setTimeout(function() {        addMarkerMethod();      }, i * 200);    }  }

自定义标记图片

标记可以定义要显示的图标，从而取代默认的图标。定义图标的同时也需要设置若干可定义标记视觉行为的属性。

简单图标

在最基本的情况下，只需将标记的 icon 属性设为某张图片的网址，即可为图标指定要使用的图片（而非默认的 Google 地图图钉图标）。在这种情况下，Google Maps API 会自动调整图标的大小。

在以下示例中，我们会创建一个图标，用于标示澳大利亚悉尼的邦迪海滩的位置：

function initialize() {    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);    var mapOptions = {      zoom: 4,      center: myLatlng,      mapTypeId: google.maps.MapTypeId.ROADMAP    }    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);      var image = 'beachflag.png';    var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);    var beachMarker = new google.maps.Marker({        position: myLatLng,        map: map,        icon: image    });  }

复杂图标

较为复杂的图标可用于指定复杂的形状（表示用户可点击的区域）、添加阴影图片以及指定这些形状相对于其他叠加层在显示时应采用的“堆叠顺序”。您应将以此方式指定的图标的 icon 和 shadow 属性设为 MarkerImage 类型的对象。

阴影图片通常应该和主图片成 45 度夹角（向右上方倾斜），并且阴影图片的左下角应与图标图片的左下角对齐。阴影图片应该采用具有 alpha 透明度的 24 位 PNG 图片，以便图片边界可正确显示在地图上。

MarkerImage 对象不仅可定义图片，还可定义图标的 size 和 origin（例如，如果您所需的图片是较大的拼合图片的一部分），以及应用于定位图标热点的 anchor（基于原点）。

以下示例介绍了如何创建复杂的标记，以标识澳大利亚新南威尔士的悉尼附近的海滩。请注意，anchor 应设为 (0,32)，以便与旗杆的基座相对应。

function initialize() {    var mapOptions = {      zoom: 10,      center: new google.maps.LatLng(-33.9, 151.2),      mapTypeId: google.maps.MapTypeId.ROADMAP    }    var map = new google.maps.Map(document.getElementById("map_canvas"),                                  mapOptions);      setMarkers(map, beaches);  }    /**  * Data for the markers consisting of a name, a LatLng and a zIndex for  * the order in which these markers should display on top of each  * other.  */  var beaches = [    ['Bondi Beach', -33.890542, 151.274856, 4],    ['Coogee Beach', -33.923036, 151.259052, 5],    ['Cronulla Beach', -34.028249, 151.157507, 3],    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],    ['Maroubra Beach', -33.950198, 151.259302, 1]  ];    function setMarkers(map, locations) {    // Add markers to the map      // Marker sizes are expressed as a Size of X,Y    // where the origin of the image (0,0) is located    // in the top left of the image.      // Origins, anchor positions and coordinates of the marker    // increase in the X direction to the right and in    // the Y direction down.    var image = new google.maps.MarkerImage('images/beachflag.png',        // This marker is 20 pixels wide by 32 pixels tall.        new google.maps.Size(20, 32),        // The origin for this image is 0,0.        new google.maps.Point(0,0),        // The anchor for this image is the base of the flagpole at 0,32.        new google.maps.Point(0, 32));    var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',        // The shadow image is larger in the horizontal dimension        // while the position and offset are the same as for the main image.        new google.maps.Size(37, 32),        new google.maps.Point(0,0),        new google.maps.Point(0, 32));        // Shapes define the clickable region of the icon.        // The type defines an HTML  element 'poly' which        // traces out a polygon as a series of X,Y points. The final        // coordinate closes the poly by connecting to the first        // coordinate.    var shape = {        coord: [1, 1, 1, 20, 18, 20, 18 , 1],        type: 'poly'    };    for (var i = 0; i < locations.length; i++) {      var beach = locations[i];      var myLatLng = new google.maps.LatLng(beach[1], beach[2]);      var marker = new google.maps.Marker({          position: myLatLng,          map: map,          shadow: shadow,          icon: image,          shape: shape,          title: beach[0],          zIndex: beach[3]      });    }  }

矢量图标

标记支持光栅图片和矢量路径的显示，称为。要显示矢量路径，请将带有所需路径的 Symbol 对象常量传递到标记的 icon 属性。您可以使用中预定义的某个路径，也可以使用定义自定义路径。

有关 Google Maps JavaScript API 中矢量图片的详情，请参阅关于符号的文档。

以下示例介绍了如何使用某个预定义的矢量路径创建图标。有关更详细的示例，请参阅关于的文档。

marker = new google.maps.Marker({    position: new google.maps.LatLng(-25.363882, 131.044922),    icon: {      path: google.maps.SymbolPath.CIRCLE,      scale: 10    },    draggable: true,    map: map  });

折线

Polyline 类用于定义地图上已连接线段的线性叠加层。Polyline 对象包含一组 LatLng 位置，并可绘制一系列线段，以便按顺序连接这些位置。

折线选项

Polyline 构造函数采用一组 Polyline options（用于指定线的 LatLng 坐标）和一组样式（用于调整折线的视觉行为）。

Polyline 就是在地图上绘制的一系列直线线段。您可以在构造线时所使用的 Polyline options 对象中，为线的笔触指定自定义颜色、粗细度和透明度，或在构造之后更改这些属性。折线支持以下笔触样式：

strokeColor，用于指定 "#FFFFFF" 格式的十六进制 HTML 颜色。Polyline 类不支持使用已命名的颜色。

strokeOpacity，用于指定线的颜色透明度，其分数比例值在 0.0 到 1.0（默认值）之间。

strokeWeight，用于指定线的笔触粗细度（以像素为单位）。

此外，折线的 editable 属性用于定义此形状是否在地图上为。

以下代码段绘制了一条宽度为 2 像素的红色折线，以连接威廉·金斯福德·史密斯从美国加利福尼亚州奥克兰到澳大利亚布里斯班的首次跨太平洋飞行路线。

function initialize() {    var myLatLng = new google.maps.LatLng(0, -180);    var mapOptions = {      zoom: 3,      center: myLatLng,      mapTypeId: google.maps.MapTypeId.TERRAIN    };      var map = new google.maps.Map(document.getElementById("map_canvas"),        mapOptions);    var flightPlanCoordinates = [      new google.maps.LatLng(37.772323, -122.214897),      new google.maps.LatLng(21.291982, -157.821856),      new google.maps.LatLng(-18.142599, 178.431),      new google.maps.LatLng(-27.46758, 153.027892)    ];    var flightPath = new google.maps.Polyline({      path: flightPlanCoordinates,      strokeColor: "#FF0000",      strokeOpacity: 1.0,      strokeWeight: 2    });      flightPath.setMap(map);  }

折线数组

折线用于指定一系列坐标作为一组 LatLng 对象。要检索这些坐标，请调用 Polyline 的 getPath()，该方法将返回 MVCArray 类型的数组。同样，您可以使用以下方法来处理和检查该数组：

getAt()，用于在给定的索引值（从零开始）处返回 LatLng。

insertAt()，用于在给定的索引值（从零开始）处插入所传递的 LatLng。请注意，该索引值处的所有现有坐标均会向前移动。

removeAt()，用于在给定的索引值（从零开始）处删除 LatLng。

请注意：要检索数组的第 i 个元素，请务必使用语法 mvcArray.getAt(i)，而不是只使用 mvcArray[i]。

以下代码创建了一张交互式地图，其中的折线是根据用户的点击次数构造的。请注意，只有当折线的 path 属性包含两个 LatLng 坐标时，该折线才会显示。

var poly;  var map;    function initialize() {    var chicago = new google.maps.LatLng(41.879535, -87.624333);    var mapOptions = {      zoom: 7,      center: chicago,      mapTypeId: google.maps.MapTypeId.ROADMAP    };      map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);      var polyOptions = {      strokeColor: '#000000',      strokeOpacity: 1.0,      strokeWeight: 3    }    poly = new google.maps.Polyline(polyOptions);    poly.setMap(map);      // Add a listener for the click event    google.maps.event.addListener(map, 'click', addLatLng);  }    /**  * Handles click events on a map, and adds a new point to the Polyline.  * @param {MouseEvent} mouseEvent  */  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    });  }

折线上的符号

您可以采用符号的形式将基于矢量的图片添加到折线。要在折线上显示符号，请设置 PolylineOptions 对象的 icons[] 属性。icons[] 数组采用一个或多个对象常量，定义如下：

icon（必填），表示要在线上呈现的图标。要详细了解如何自定义符号，请参阅关于的文档。

offset，表示与要呈现图标所在的线起点的距离。此距离可表示为线长度的百分比（例如“50%”）或像素（例如“50 像素”）。默认值为“100%”。

repeat，表示线上连续图标之间的距离。此距离可表示为线长度的百分比（例如“50%”）或像素（例如“50 像素”）。要停用重复图标，请将距离指定为“0”。默认值为“0”。

如果您的折线是测地线，那么对于偏移和重复所指定的距离在默认情况下均以米为单位来计算。如果将偏移或重复设为像素值，就会按屏幕上的像素来计算距离。

借助符号与 PolylineOptions 类的组合，您可以对地图上折线的外观进行充分的控制。下面是您可以应用的一些自定义示例。

箭头

使用 IconSequence.offset 属性可对折线的起点或终点添加箭头。在此示例中，将偏移设为 100% 可在线的终点放置箭头。

var lineCoordinates = [    new google.maps.LatLng(22.291, 153.027),    new google.maps.LatLng(18.291, 153.027)  ];    var lineSymbol = {    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW  };    var line = new google.maps.Polyline({    path: lineCoordinates,    icons: [{      icon: lineSymbol,      offset: '100%'    }],    map: map  });

虚线

您可以将折线的透明度设为 0%，然后按有规律间隔绘制不透明的符号，从而实现虚线效果。

var lineCoordinates = [    new google.maps.LatLng(22.291, 153.027),    new google.maps.LatLng(18.291, 153.027)  ];    var lineSymbol = {    path: 'M 0,-1 0,1',    strokeOpacity: 1,    scale: 4  };    var line = new google.maps.Polyline({    path: lineCoordinates,    strokeOpacity: 0,    icons: [{      icon: lineSymbol,      offset: '0',      repeat: '20px'    }],    map: map  });

自定义路径

自定义符号可让您向折线添加多种不同的形状。

var lineCoordinates = [    new google.maps.LatLng(22.291, 153.027),    new google.maps.LatLng(18.291, 153.027)  ];    var symbolOne = {    path: 'M -2,0 0,-2 2,0 0,2 z',    strokeColor: '#F00',    fillColor: '#F00',    fillOpacity: 1  };    var symbolTwo = {    path: 'M -2,-2 2,2 M 2,-2 -2,2',    strokeColor: '#292',    strokeWeight: 4  };    var symbolThree = {    path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3',    strokeColor: '#00F',    rotation: 0  };    var line = new google.maps.Polyline({    path: lineCoordinates,    icons: [{      icon: symbolOne,      offset: '0%'      },{        icon: symbolTwo,        offset: '50%'      },{        icon: symbolThree,        offset: '100%'      }    ],    map: map  });

为符号添加动画效果

您可以使用 setTimeout() 函数按固定的间隔更改符号的偏移，从而为其添加动画效果。

var line;    function initialize() {    var mapOptions = {      center: new google.maps.LatLng(20.291, 153.027),      zoom: 6,      mapTypeId: google.maps.MapTypeId.ROADMAP    };        var map = new google.maps.Map(document.getElementById("map_canvas"),        mapOptions);            var lineCoordinates = [      new google.maps.LatLng(22.291, 153.027),      new google.maps.LatLng(18.291, 153.027)    ];      var lineSymbol = {      path: google.maps.SymbolPath.CIRCLE,      scale: 8,      strokeColor: '#393'    };      line = new google.maps.Polyline({      path: lineCoordinates,      icons: [{        icon: lineSymbol,        offset: '100%'      }],      map: map    });  }    function animateCircle() {      var count = 0;      offsetId = window.setInterval(function() {        count = (count + 1) % 200;          var icons = line.get('icons');        icons[0].offset = (count / 2) + '%';        line.set('icons', icons);    }, 20);  }

多边形

与 Polyline 对象类似，Polygon 对象也是由一系列有序坐标组成的。不过，多边形不像折线一样有两个端点，而是定义闭合区域。与折线类似的是，您可以定义影响多边形轮廓的笔触；不同的是，您还可以定义多边形内的填充区域。

此外，Polygon 还可以展示复杂形状，其中包括不连续形状（多个多边形定义为一个多边形）、“圆环”（其中的多边形区域在多边形内显示为“岛状”）以及一个或多个多边形的交叉。因此，单个多边形可指定多条路径。

多边形选项

与折线类似，您可以定义多边形边缘（“笔触”）的自定义颜色、粗细和不透明度，以及封闭区域（“填充”）的自定义颜色和不透明度。颜色应以十六进制数字 HTML 样式表示。

由于多边形区域可能包括多条独立的路径，因此 Polygon 对象的 paths 属性可用于指定“一组数组”（其中每个数组都为 MVCArray 类型且分别定义一系列有序的 LatLng 坐标）。

不过，对于仅包含一条路径的简单多边形，为方便起见，您可以使用一组 LatLng 坐标来构造 Polygon。在构造完成并将此简单数组存储到 Polygon 的 paths 属性中后，Google Maps API 会将其转换为“一组数组”。此外，该 API 还提供了简单的 getPath() 方法以构造仅包含一条路径的简单多边形。

注意：如果您是用此方式构造多边形的，那么仍需要将路径处理为 MVCArray，以便检索多边形的相关值。

此外，多边形的 editable 属性用于定义此形状是否在地图上为。

以下代码段创建了一个表示百慕大三角的多边形：

function initialize() {    var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);    var mapOptions = {      zoom: 5,      center: myLatLng,      mapTypeId: google.maps.MapTypeId.TERRAIN    };      var bermudaTriangle;      var map = new google.maps.Map(document.getElementById("map_canvas"),        mapOptions);      var triangleCoords = [      new google.maps.LatLng(25.774252, -80.190262),      new google.maps.LatLng(18.466465, -66.118292),      new google.maps.LatLng(32.321384, -64.75737),      new google.maps.LatLng(25.774252, -80.190262)    ];      // Construct the polygon    // Note that we don't specify an array or arrays, but instead just    // a simple array of LatLngs in the paths property    bermudaTriangle = new google.maps.Polygon({      paths: triangleCoords,      strokeColor: "#FF0000",      strokeOpacity: 0.8,      strokeWeight: 2,      fillColor: "#FF0000",      fillOpacity: 0.35    });      bermudaTriangle.setMap(map);  }

多边形自动完成

以上示例中的 Polygon 包含四个坐标，不过请注意，其中第一个坐标和最后一个坐标的位置相同，从而定义了一个环路。不过，实际上由于多边形定义的就是封闭区域，因此无需定义这最后一个坐标。对于任意给定路径，Maps API 将通过绘制连接最后一个坐标与第一个坐标的笔触来自动“封闭”任何多边形。

下例除了省略最后一个坐标之外，其他均与上例相同。

多边形数组

多边形会将其一系列坐标指定为一组数组，其中各数组都是 MVCArray 类型的。每个“子”数组都是一组 LatLng 坐标，用于指定单条路径。要检索这些坐标，请调用 Polygon的 getPaths() 方法。由于数组为 MVCArray，因此您需要使用以下方法来处理和检查该数组：

getAt()，用于在给定的索引值（从零开始）处返回 LatLng。

insertAt()，用于在给定的索引值（从零开始）处插入所传递的 LatLng。请注意，该索引值处的所有现有坐标均会向前移动。

removeAt()，用于在给定的索引值（从零开始）处删除 LatLng。

请注意：要检索数组的第 i 个元素，请务必使用语法 mvcArray.getAt(i)，而不是只使用 mvcArray[i]。

以下代码通过显示多边形的坐标信息，对多边形的点击事件进行了处理：

var map;  var infoWindow;    function initialize() {    var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);    var mapOptions = {      zoom: 5,      center: myLatLng,      mapTypeId: google.maps.MapTypeId.TERRAIN    };      var bermudaTriangle;      map = new google.maps.Map(document.getElementById("map_canvas"),        mapOptions);      var triangleCoords = [      new google.maps.LatLng(25.774252, -80.190262),      new google.maps.LatLng(18.466465, -66.118292),      new google.maps.LatLng(32.321384, -64.75737)    ];      bermudaTriangle = new google.maps.Polygon({      paths: triangleCoords,      strokeColor: "#FF0000",      strokeOpacity: 0.8,      strokeWeight: 3,      fillColor: "#FF0000",      fillOpacity: 0.35    });      bermudaTriangle.setMap(map);      // Add a listener for the click event    google.maps.event.addListener(bermudaTriangle, 'click', showArrays);      infowindow = new google.maps.InfoWindow();  }    function showArrays(event) {      // Since this Polygon only has one path, we can call getPath()    // to return the MVCArray of LatLngs    var vertices = this.getPath();      var contentString = "Bermuda Triangle Polygon
";    contentString += "Clicked Location: 
" + event.latLng.lat() + "," + event.latLng.lng() + "
";      // Iterate over the vertices.    for (var i =0; i < vertices.length; i++) {      var xy = vertices.getAt(i);      contentString += "
" + "Coordinate: " + i + "
" + xy.lat() +"," + xy.lng();    }      // Replace our Info Window's content and position    infowindow.setContent(contentString);    infowindow.setPosition(event.latLng);      infowindow.open(map);  }

圆形和矩形

除了普通的 Polygon 类之外，JavaScript Maps API 还包含一些适用于 Circle 和 Rectangle 的特定类（用于简化其构造）。

圆形

Circle 与 Polygon 类似，您可以自定义圆形边缘（“笔触”）的颜色、粗细和透明度，以及封闭区域（“填充”）的颜色和透明度。颜色应以十六进制数字 HTML 样式表示。

与 Polygon 不同，您不应为 Circle 定义 paths；圆形有两个用于定义其形状的其他属性：

center，用于指定圆心的 google.maps.LatLng。

radius，用于指定圆形的半径（以米为单位）。

此外，圆形的 editable 属性用于定义此形状是否在地图上为。

以下代码段创建了用于表示美国人口的圆形：

// Create an object containing LatLng, population.  var citymap = {};  citymap['chicago'] = {    center: new google.maps.LatLng(41.878113, -87.629798),    population: 2842518  };  citymap['newyork'] = {    center: new google.maps.LatLng(40.714352, -74.005973),    population: 8143197  };  citymap['losangeles'] = {    center: new google.maps.LatLng(34.052234, -118.243684),    population: 3844829  }  var cityCircle;    function initialize() {    var mapOptions = {      zoom: 4,      center: new google.maps.LatLng(37.09024, -95.712891),      mapTypeId: google.maps.MapTypeId.TERRAIN    };      var map = new google.maps.Map(document.getElementById("map_canvas"),        mapOptions);      for (var city in citymap) {      // Construct the circle for each value in citymap. We scale population by 20.      var populationOptions = {        strokeColor: "#FF0000",        strokeOpacity: 0.8,        strokeWeight: 2,        fillColor: "#FF0000",        fillOpacity: 0.35,        map: map,        center: citymap[city].center,        radius: citymap[city].population / 20      };      cityCircle = new google.maps.Circle(populationOptions);    }  }

矩形

Rectangle 与 Polygon 类似，您可以自定义矩形边缘（“笔触”）的颜色、粗细和透明度，以及封闭区域（“填充”）的颜色和透明度。颜色应以十六进制数字 HTML 样式表示。

与 Polygon 不同，您不应为 Rectangle 定义 paths；矩形还有一个用于定义其形状的 bounds 属性：

bounds，用于指定矩形的 google.maps.LatLngBounds。

此外，矩形的 editable 属性用于定义此形状是否在地图上为。

以下示例针对任何 'zoom_changed' 事件分别根据前一个视口创建了矩形：

function initialize() {      var coachella = new google.maps.LatLng(33.6803003, -116.173894);    var rectangle;      var mapOptions = {      zoom: 11,      center: coachella,      mapTypeId: google.maps.MapTypeId.TERRAIN    };      var map = new google.maps.Map(document.getElementById("map_canvas"),        mapOptions);      rectangle = new google.maps.Rectangle();      google.maps.event.addListener(map, 'zoom_changed', function() {        // Get the current bounds, which reflect the bounds before the zoom.      var rectOptions = {        strokeColor: "#FF0000",        strokeOpacity: 0.8,        strokeWeight: 2,        fillColor: "#FF0000",        fillOpacity: 0.35,        map: map,        bounds: map.getBounds()      };      rectangle.setOptions(rectOptions);    });  }

用户可修改的形状

您可将任何形状的叠加层（折线、多边形、圆形和矩形）设为用户可修改，方法是在形状选项中将 editable 设为 true。

要将标记设为可拖动，请在标记选项中将 draggable 设为 true。

var circleOptions = {    center: new google.maps.LatLng(-34.397, 150.644),    radius: 25000,    map: map,    editable: true  };  var circle = new google.maps.Circle(circleOptions);

将某种形状的叠加层设为可修改会增加对该形状的处理，从而允许用户直接在地图上对其进行重新定位、形状调整和/或大小调整。

用户在某个会话中针对对象所作出的更改不会适用于其他会话。如果您想要保存针对折线所作出的修改，请务必自行捕获并存储相关信息。

修改事件

如果对形状进行了修改，那么系统会在修改完毕后触发相关事件。下面列出了这些事件。

形状	事件
圆形	`radius_changed` `center_changed`
多边形	`insert_at` `remove_at` `set_at` 监听器必须设置在多边形的路径上。如果多边形有多条路径，那么每条路径上都应设置监听器。
折线	`insert_at` `remove_at` `set_at` 监听器必须设置在折线的路径上。
矩形	`bounds_changed`

google.maps.event.addListener(circle, 'radius_changed', function() {    radius = circle.getRadius();  });    google.maps.event.addListener(outerPath, 'set_at', function() {    print('Vertex moved on outer path.');  });    google.maps.event.addListener(innerPath, 'insert_at', function() {    print('Vertex removed from inner path.');  });

转载于:https://www.cnblogs.com/jhlong/p/5394862.html

你可能感兴趣的文章