添加多段线
Polyline
构造函数带有一组用于指定线的 LatLng
坐标的 PolylineOptions
,以及一组用于调整多段线视觉行为的样式。
Polyline
对象在地图上绘制为一系列直线线段。您可以在构建线时在 PolylineOptions
内指定线描边的自定义颜色、粗细和不透明度,也可在构建后更改这些属性。多段线支持下列描边样式:
strokeColor
指定"#FFFFFF"
格式的十六进制 HTML 颜色。Polyline
类不支持命名颜色。strokeOpacity
指定一个介于0.0
和1.0
的数值,用于确定线颜色的不透明度。默认值为1.0
。strokeWeight
指定线的宽度(单位:像素)。
多段线的 editable
属性指定用户是否可以编辑形状。同理,您也可以通过设置 draggable
属性来允许用户拖动线。
所有的绘图都有 editable
属性和draggable
属性
移除多段线
如需移除地图中的多段线,请调用 setMap()
方法,并传递 null
作为其自变量。在下例中,flightPath
是一个多段线对象:
flightPath.setMap(null);
请注意,以上方法不会删除多段线,而只是从地图中移除多段线。如果您实际上是想删除多段线,则应先将其从地图中移除,然后将多段线本身设置为 null
。
检查多段线
多段线以 LatLng
对象数组形式指定一系列坐标。这些坐标决定线的路径。如需检索这些坐标,请调用 getPath()
,后者将返回 MVCArray
类型的数组。您可以利用下列操作操纵和检查该数组:
getAt()
返回给定以零为起点索引值处的LatLng
。insertAt()
在给定以零为起点索引值处插入传递的LatLng
。请注意,该索引值处的任何现有坐标都将前移。removeAt()
移除给定以零为起点索引值处的LatLng
。
注:您不能直接利用 mvcArray[i]
语法检索数组的第 i 个元素。您必须使用 mvcArray.getAt(i)
。
// This example creates an interactive map which constructs a polyline based on// user clicks. Note that the polyline only appears once its path property// contains two LatLng coordinates. var poly;var map; function initMap() { map = new google.maps.Map(document.getElementById(‘map‘), { zoom: 7, center: {lat: 41.879, lng: -87.624} // Center the map on Chicago, USA. }); poly = new google.maps.Polyline({ strokeColor: ‘#000000‘, strokeOpacity: 1.0, strokeWeight: 3 }); poly.setMap(map); // Add a listener for the click event map.addListener(‘click‘, addLatLng);} // Handles click events on a map, and adds a new point to the Polyline.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
类对地图上多段线的外观进行充分的控制。请参阅符号,了解有关箭头、虚线、自定义符号及动画符号的信息。
其他绘图都可以根据多线段的使用及方法来使用
-----------------------------------------------------华丽分割线( 以下为实例代码)--------------------------------------------------------------
// 划折线
var flightPlanCoordinates = [
{lat: 36.075620815001415, lng: 120.43020844459534},
{lat: 36.074025246504746, lng: 120.4285454750061},
{lat: 36.069949462636, lng: 120.43118476867676},
{lat: 36.06604691846644, lng: 120.42285919189453},
{lat: 36.074025246504746, lng: 120.4139757156372},
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: ‘#FF0000‘,
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
var workStart = new google.maps.Marker({
position: flightPlanCoordinates[0],
label: "起",
title: "上班起点",
map: map
});
var workEnd = new google.maps.Marker({
position: flightPlanCoordinates[(flightPlanCoordinates.length-1)],
label: "终", // label 只显示第一个字符
title: "上班终点",
map: map
});
// 绘制多边形
var triangleCoords = [
{lat: 36.06602136399105, lng: 120.35249282982409},
{lat: 36.082132409147086, lng: 120.42076576221541},
{lat: 36.10016285436, lng: 120.3873546955059},
{lat: 36.06602136399105, lng: 120.35249282982409},
];
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: ‘#32CD32‘,
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: ‘#3CB371‘,
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
// 绘制矩形
var rectangle = new google.maps.Rectangle({
draggable: true, // 是否可拖动
editable: true, // 是否可编辑
strokeColor: ‘#FF0000‘,
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: ‘#FF0000‘,
fillOpacity: 0.35,
map: map,
bounds: {
north: 36.114595,
south: 36.104595,
east: 120.369731,
west: 120.349731
}
});
// 绘制圆形
var cityCircle = new google.maps.Circle({
draggable: true, // 是否可拖动
editable: false, // 是否可编辑
strokeColor: ‘#FF0000‘,
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: ‘#FF0000‘,
fillOpacity: 0.35,
map: map,
center: qingdao,
radius: 600 // 单位米
});