<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>google地圖 ——軌跡</title>
<script type="text/javascript" src="js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(39.964556,116.274834),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// 這裏填上軌跡的經緯座標，或者ajax從後臺讀取
// 座標做好是在路口的，不然畫線不在路上。
var trackPoints = [
new google.maps.LatLng(39.964556,116.274834),
new google.maps.LatLng(39.956662,116.275735),
new google.maps.LatLng(39.957221,116.284447),
new google.maps.LatLng(39.95834,116.29406),
new google.maps.LatLng(39.959326,116.29951),
new google.maps.LatLng(39.960083,116.303029),
new google.maps.LatLng(39.96209,116.307793)
];
var trackPath = new google.maps.Polyline({
path: trackPoints,
strokeColor: "#FF0000", // 線條顏色
strokeOpacity: 1.0, // 線條透明度
strokeWeight: 2 // 線條粗細
});
trackPath.setMap(map);
}
</script>
</head>
<body οnlοad="initialize()">
<form id="form1" runat="server">
<div id="map_canvas" style="width:1000px; height:700px;"></div>
</form>
</body>
</html>
運行效果：
![]()
