Google地图轨迹 

 1 <!DOCTYPE html>
 2 <html>
 3 <head runat="server">
 4     <title>google地图轨迹</title>
 5     <style type="text/css">
 6         #map_canvas {
 7             width: auto;
 8             height: 600px;
 9             border: 1px solid gray;
10         }
11     </style>
12 
13 </head>
14 <body onload="initialize()">
15     <form id="form1" runat="server">
16         <div id="map_canvas"></div>
17     </form>
18 
19     <script src="http://maps.google.com/maps/api/js?key=您的密匙&sensor=true" type="text/javascript"></script>
20     <script type="text/javascript">
21 
22         function initialize() {
23             var myOptions = {
24                 zoom: 16,
25                 center: new google.maps.LatLng(39.964556, 116.274834),
26                 mapTypeId: google.maps.MapTypeId.ROADMAP
27             };
28             var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
29             // 这里填上轨迹的经纬坐标，或者ajax从后台读取
30             // 坐标做好是在路口的，不然画线不在路上。
31             var trackPoints = [
32                 new google.maps.LatLng(39.964556, 116.274834),
33                 new google.maps.LatLng(39.956662, 116.275735),
34                 new google.maps.LatLng(39.957221, 116.284447),
35                 new google.maps.LatLng(39.95834, 116.29406),
36                 new google.maps.LatLng(39.959326, 116.29951),
37                 new google.maps.LatLng(39.960083, 116.303029),
38                 new google.maps.LatLng(39.96209, 116.307793)
39             ];
40 
41             var trackPath = new google.maps.Polyline({
42                 path: trackPoints,
43                 strokeColor: "#FF0000", // 线条颜色
44                 strokeOpacity: 1.0, // 线条透明度
45                 strokeWeight: 2 // 线条粗细
46             });
47 
48             //放置锚点  地图标记Marker
49             for (var i = 0; i < trackPoints.length; i++) {
50                 var marker = new google.maps.Marker({
51                     position: trackPoints[i],
52                     map: map,
53                 })
54             }
55             trackPath.setMap(map);              //设置地图
56         }
57     </script>
58 </body>
59 </html>

posted @ 2017-03-21 17:24  LuckyDog020  阅读(327)  评论(0)    收藏  举报