折线
https://developers.google.com/maps/documentation/javascript/overlays?hl=zh-CN#Polylines
Polyline 类用于定义地图上已连接线段的线性叠加层。Polyline 对象包含一组 LatLng 位置，并可绘制一系列线段，以便按顺序连接这些位置。
折线选项
Polyline 构造函数采用一组 Polyline options（用于指定线的 LatLng 坐标）和一组样式（用于调整折线的视觉行为）。
Polyline 就是在地图上绘制的一系列直线线段。您可以在构造线时所使用的 Polyline options 对象中，为线的笔触指定自定义颜色、粗细度和透明度，或在构造之后更改这些属性。折线支持以下笔触样式：
strokeColor，用于指定 "#FFFFFF" 格式的十六进制 HTML 颜色。Polyline 类不支持使用已命名的颜色。
strokeOpacity，用于指定线的颜色透明度，其分数比例值在 0.0 到 1.0（默认值）之间。
strokeWeight，用于指定线的笔触粗细度（以像素为单位）。
此外，折线的 editable 属性用于定义此形状是否在地图上为用户可修改的。
示例
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var lanLng = new google.maps.LatLng(30.51667,114.31667);
var mapOptions = {
zoom: 4,
center: lanLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//创建折线
var flightPlanCoordinates = [
new google.maps.LatLng(23.117055,113.27599), //广州
lanLng, //武汉
new google.maps.LatLng(30.40, 120.51),
new google.maps.LatLng(39.57, 116.17)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
editable:true,//此形状是否在地图上为用户可拖动修改的
strokeWeight: 2 // 2 像素的红色折线
});
flightPath.setMap(map);
//创建了一张交互式地图，其中的折线是根据用户的点击次数构造的
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
});
}
// Add a listener for the click event
google.maps.event.addListener(map, 'click', addLatLng);
var lineCoordinates = [
new google.maps.LatLng(31.40, 120.51),
new google.maps.LatLng(38.57, 116.17)
];
/**
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
*/
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4
};
var polyOptions = {
path: lineCoordinates,
strokeColor: '#000000',
strokeOpacity: 1.0, //strokeOpacity: 0, 透明度
icons: [{
icon: lineSymbol,
//repeat: '20px',
offset: '100%'
}],
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
//自定义符号可让您向折线添加多种不同的形状
var lineCoordinates2 = [
new google.maps.LatLng(31.40, 110.51),
new google.maps.LatLng(38.57, 106.17)
];
var symbolOne2 = {
path: 'M -2,0 0,-2 2,0 0,2 z',
strokeColor: '#F00',
fillColor: '#F00',
fillOpacity: 1
};
var symbolTwo2 = {
path: 'M -2,-2 2,2 M 2,-2 -2,2',
strokeColor: '#292',
strokeWeight: 4
};
var symbolThree2 = {
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 line2 = new google.maps.Polyline({
path: lineCoordinates2,
icons: [{
icon: symbolOne2,
offset: '0%'
},{
icon: symbolTwo2,
offset: '50%'
},{
icon: symbolThree2,
offset: '100%'
}
],
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>