介绍您可以向地图添加各种形状。形状是地图上绑定到特定纬度/经度坐标的对象。可用的形状如下：直线、多边形、圆形和矩形。您还可以将形状配置为可由用户编辑或拖动。多段线要在地图上画线，请使用多段线。Polyline类在地图上定义了一堆线性连接的线段。包含LatLng位置数组的Polyline对象创建一系列以有序方式连接这些位置的线段。1.添加多段线多段线构造函数采用一组PolylineOptions来指定直线的LatLng坐标，并使用一组样式来调整多段线的视觉行为。Polyline对象在地图上绘制为一系列直线段。您可以在构建线条时在PolylineOptions中为线条描边指定自定义颜色、粗细和不透明度，或在构建后更改这些属性。多段线支持以下笔划样式：strokeColor以“#FFFFFF”格式指定十六进制HTML颜色。Polyline类不支持命名颜色。strokeOpacity指定一个介于0.0和1.0之间的数字，用于确定线条颜色的不透明度。默认值为1.0。strokeWeight指定线条的宽度（单位：像素）。折线的可编辑属性指定用户是否可以编辑形状。请参阅下面的用户可编辑形状。同样，你也可以通过设置draggable属性来允许用户拖动线。//此示例创建了一条2像素宽的红线，显示William的首次跨太平洋飞行路径，途径奥克兰、加利福尼亚州、澳大利亚布里斯班。unctioninitMap(){varmap=newgoogle.maps.Map(document.getElementById('map'),{zoom:3,center:{lat:0,lng:-180},mapTypeId:google.maps.MapTypeId.TERRAIN});varflightPlanCoordinates=[{lat:37.772,lng:-122.214},{lat:21.291,lng:-157.821},{lat:-18.142,lng:178.431},{lat:-27.467,lng:153.027}];varflightPath=newgoogle.maps.Polyline({path:flightPlanCoordinates,geodesic:true,strokeColor:'#FF0000',strokeOpacity:1.0,strokeWeight:2});flightPath.setMap(地图);2。要删除地图中的折线，请调用setMap()方法并将null作为其参数传递。在下面的示例中，flightPath是一个折线对象：`flightPath.setMap(null);`//ThisexampleaddsaUIcontrolalowinguserstoremovethepolylinefromthemap.varflightPath;varmap;functioninitMap(){map=newgoogle.maps.Map(document.getElementById('map'),{zoom:3,center:{lat:0,lng:-180},mapTypeId:google.maps.MapTypeId.TERRAIN});varflightPathCoordinates=[{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=newgoogle.maps.Polyline({path:flightPathCoordinates,strokeColor:'#FF0000',strokeOpacity:1.0,strokeWeight:2});addLine();}functionaddLine(){flightPath.setMap(map);}functionremoveLine(){flightPath.setMap(null);}3.CheckpolylinePolyline指定一个LatLng对象数组系列坐标。这些坐标确定线的路径。要检索这些坐标，请调用getPath()，它返回一个MVCArray类型的数组。您可以使用以下操作操作和检查此数组：getAt()返回给定的从零开始的索引值处的LatLnginsertAt()在给定的从零开始的索引值处插入传递的LatLng。请注意，该索引值处的任何现有坐标都将被提前removeAt()删除给定的从零开始的索引值处的LatLng注意：不能使用mvcArray[i]语法直接检索数组的第i个元素。你必须使用mvcArray.getAt(i)。//此示例创建一个交互式地图，该地图根据//用户点击构建折线。注意，thepolylineonlyappearsonceitspathproperty//containstwoLatLngcoordinates.varpoly;varmap;functioninitMap(){map=newgoogle.maps.Map(document.getElementById('map'),{zoom:9,41center:{7:-87.624}//CenterthemaponChicago,USA.});poly=newgoogle.maps.Polyline({strokeColor:'#000000',strokeOpacity:1.0,strokeWeight:3});poly.setMap(map);//为点击事件添加监听器map.addListener('click',addLatLng);}//处理地图上的click事件，并添加一个新点到Polyline.functionaddLatLng(event){varpath=poly.getPath();//因为path是一个MVCArray，我们可以简单地附加一个新坐标//它会自动出现.path.push(lineevent.latonthenewLng);at/。varmarker=newgoogle.maps.Marker({position:event.latLng,title:'#'+path.getLength(),map:map});}4.自定义折线可以添加基于符号矢量的Image。您可以通过组合符号和PolylineOptions类来完全控制地图上多段线的外观。有关箭头、虚线、自定义符号和动画符号的信息，请参阅符号。多边形多边形表示由闭合路径（或环路）包围的区域，由一系列坐标定义。Polygon对象类似于Polyline对象，因为它们都包含有序的坐标序列。使用描边和填充绘制多边形。您可以为多边形边缘（描边）和封闭区域（填充）定义自定义颜色、厚度和不透明度。颜色应以十六进制HTML格式表示。不支持颜色名称。多边形对象可以描述复杂的形状，包括：由单个多边形定义的多个不连续区域带孔的区域一个或多个区域的交集paths属性指定一组数组，每个数组的类型为MVCArray。每个数组定义一个不同的LatLng坐标有序序列。对于仅包含一条路径的简单多边形，您可以从单个LatLng坐标数组构造多边形。在构建时，GoogleMapsJavaScriptAPI会将这个简单的数组存储在paths属性中时将其转换为数组的数组。API为包含路径的多边形提供了一个简单的getPath()方法。注意：如果您以这种方式构建一个简单的多边形，您仍然需要通过将路径作为MVCArray进行操作来检索多边形的值。多边形的可编辑属性指定用户是否可以编辑形状。请参阅下面的用户可编辑形状。同样，您也可以通过设置draggable属性来允许用户拖动形状。//这个例子创建了一个代表百慕大三角的简单多边形。functioninitMap(){varmap=newgoogle.maps.Map(document.getElementById('map'),{zoom:5,center:{lat:24.886,lng:-70.268},mapTypeId:google.maps.MapTypeId.TERRAIN});//定义多边形路径的LatLng坐标.vartriangleCoords=[{lat:25.774,lng:-80.190},{lat:18.466,lng:-66.118},{lat:32.321,lng:-64.757},{lat:25.774,lng:-80.190}];//Constructthepolygon.varbermudaTriangle=newgoogle.maps.Polygon({paths:triangleCoords,strokeColor:'#FF0000',strokeOpacity:0.8,strokeWeight:2,fillColor:'#FF0000',fillOpacity:0.35});bermudaTriangle.setMap(map);}上面例子中的Polygon包含四组LatLng坐标，但是请注意第一组坐标和最后一组坐标定义了相同的位置，用于完成循环。但在实践中，由于多边形定义了封闭区域，因此您无需指定最终的一组坐标。GoogleMapsJavaScriptAPI将通过绘制将最后一个位置连接回任何给定路线的第一个位置的笔划自动完成多边形。2.移除多边形要从地图中移除多边形，调用setMap()方法，将null作为参数传递。在下面的示例中，bermudaTriangle是一个多边形对象：bermudaTriangle.setMap(null)；3.检查多边形多边形将其坐标系列指定为数组的数组，其中每个数组的类型为MVCArray。每个“叶”数组都是指定单个路径的LatLng坐标数组。要检索这些坐标，请调用Polygon对象的getPaths()方法。由于数组是MVCArray，您需要使用以下操作来操作和检查数组：getAt()返回给定的从零开始的索引值处的LatLnginsertAt()在给定的从零开始的索引值处插入传递的LatLng。请注意，该索引值处的任何现有坐标都将被提前removeAt()删除给定从零开始的索引值处的LatLng矩形除了Polygon通用类之外，GoogleMapsJavaScriptAPI还提供了***一个类，其结构为由Rectangle对象简化。1.添加一个矩形Rectangle与Polygon类似，也可以为矩形的边（描边）定义自定义颜色、粗细和不透明度，为矩形内部的区域（填充区域）定义自定义颜色和不透明度。颜色应以十六进制数字HTML样式表示。与多边形不同，您不需要为矩形定义路径。与多边形不同，矩形具有bounds属性，其形状是通过为矩形指定google.maps.LatLngBounds来定义的。矩形的可编辑属性指定用户是否可以编辑形状。请参阅下面的用户可编辑形状。同样，你也可以通过设置draggable属性来允许用户拖动矩形。//这个例子将一个矩形添加到amap.functioninitMap(){varmap=newgoogle.maps.Map(document.getElementById('map'),{zoom:11,center:{lat:33.678,lng:-116.243},mapTypeId:google.maps。MapTypeId.TERRAIN});varrectangle=newgoogle.maps.Rectangle({strokeColor:'#FF0000',strokeOpacity:0.8,strokeWeight:2,fillColor:'#FF0000',fillOpacity:0.35,map:map,bounds:{north:33.685,南:33.671,东:-116.234,西:-116.251}});}2.移除矩形要从地图中移除矩形，请调用setMap()方法并将null作为其参数传递。rectangle.setMap(null);请注意，上述方法并没有删除矩形，只是将其从地图中移除。如果你真的想删除矩形，你应该先从地图中删除它，然后将矩形本身设置为空。Circle除了Polygon泛型类之外，GoogleMapsJavaScriptAPI还提供了一个Circle对象来简化其结构。1.添加一个圆与多边形类似，您也可以为圆的边缘（描边）定义自定义颜色、粗细和不透明度，为圆内的区域（填充区域）定义自定义颜色和不透明度。颜色应以十六进制数字HTML样式表示。与Polygon不同，您不需要为Circle定义路径。圆有两个额外的形状定义属性：center指定圆的中心google.maps.LatLngradius指定圆的半径（以米为单位）圆的editable属性指定用户是否可以编辑形状。请参阅下面的用户可编辑形状。同样，你也可以通过设置draggable属性来允许用户拖动圆。//此示例在地图上创建圆圈，代表北美//美洲的人口。//首先，创建一个包含每个城市的LatLng和人口的对象。varcitymap={chicago:{center:{lat:41.878,lng:-87.629},population:2714856},newyork:{0center.7lng:{1lat,4ng:-74.005},population:8405837},losangeles:{center:{lat:34.052,lng:-118.243},population:3857799},vancouver:{center:{lat:49.25,lng:-123.1},population:603502}};functioninitMap(){//Createthemap.varmap=newgoogle...注：Wescalethareaofthecirclebasedonthepopulation.for(varcityincitymap){//Addthecircleforthiscitytothemap.varcityCircle=newgoogle.maps.Circle({strokeColor:'#FF0000',0strokeOpacity: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)；请注意，上述方法并没有删除圆，只是将其从地图中删除。如果你真的想删除圆，你应该先从地图上删除它，然后将圆本身设置为空。用户可以编辑和拖动的形状将形状设置为可编辑会向形状添加手柄，用户可以使用这些手柄直接在地图上重新定位、调整形状和调整形状大小。您还可以使形状可拖动，以便用户可以将它们移动到地图上的其他位置。用户对对象的更改不会跨会话持续存在。如果要保存用户编辑，您必须自己收集和存储信息。1.使形状可编辑您可以通过在形状选项中将editable设置为true来将任何形状（折线、多边形、圆形和矩形）设置为可由用户编辑。2.使形状可拖动默认情况下，绘制在地图上的形状的位置是固定的。要允许用户将形状拖动到地图上的另一个位置，请在形状选项中将draggable设置为true。3.监听edit事件在编辑shape时，编辑完成后会触发一个事件。下面列出了这些事件。shapeeventcircleradius_changed,center_changedpolygoninsert_at,remove_at,set_at,监听器必须设置在多边形的路径上，如果多边形有多个路径，监听器必须在每条路径上设置polylineinsert_at,remove_at,set_at,必须设置监听器矩形折线路径上的bounds_changed一些相关代码片段：google.maps.event.addListener(circle,'radius_changed',function(){console.log(circle.getRadius());});google.maps.event.addListener(outerPath,'set_at',function(){console.log('Vertexmovedonouterpath.');});google.maps.event.addListener(innerPath,'insert_at',function(){console.log('Vertexremovedfrominnerpath.');});google.maps.event.addListener(rectangle,'bounds_changed',function(){console.log('Boundschanged.');});4.监听拖动事件拖动形状时，拖动操作开始和结束时以及拖动过程中会触发事件。对于折线、多边形、圆形和矩形，将触发以下事件。事件描述dragstart当用户开始拖动形状时触发drag当用户拖动形状时重复触发dragend当用户停止拖动形状时触发
