标签：
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 // 单位米
});
标签：
原文地址：http://www.cnblogs.com/huaxingtianxia/p/5486594.html
