Google地图创建轨迹查询与点击Marker显示弹出层，方法与百度地图差不多
<!DOCTYPE html> <html> <head runat="server"> <title>google地图轨迹</title> <style type="text/css"> #map_canvas { width: auto; height: 600px; border: 1px solid gray; } #user1 { top: 50px; } #user2 { top: 200px; } .user-list { right: 25px; position: fixed; border: 1px solid #c0c0c0; width: 180px; height: 110px; background: #fff; border-radius: 10px; filter: alpha(Opacity=80); -moz-opacity: 0.8; opacity: 0.8; } .user-list ul { list-style-type: none; padding-left: 10px; } .user-list ul li { padding-bottom: 10px; } </style> </head> <body onload="initialize()"> <form id="form1" runat="server"> <div id="map_canvas"></div> </form> <div id="user1" class="user-list"> <ul> <li>姓名：张三</li> <li>职务：3</li> <li>电话：123456</li> </ul> </div> <div id="user2" class="user-list"> <ul> <li>姓名：李四</li> <li>职务：3</li> <li>电话：123456</li> </ul> </div> <script src="http://maps.google.com/maps/api/js?key=您的密匙&v=3.1&sensor=true" type="text/javascript"></script> <script type="text/javascript"> function initialize() { var myOptions = { zoom: 15, 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); // Google地图轨迹坐标集 纬度，经度 或使用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 // 线条粗细 }); for (var i = 0; i < trackPoints.length; i++) { //放置锚点 地图标记Marker var marker = new google.maps.Marker({ position: trackPoints[i], map: map, }); //创建标注窗口 showinfomessage(marker, map); } trackPath.setMap(map); } function showinfomessage(marker, map) { var infoWindow = new google.maps.InfoWindow({ content: "姓名：张三</br>职务：3<br />电话：123456" // 创建信息窗口对象 }); google.maps.event.addListener(marker,"click", function () { infoWindow.open(map,marker); // 打开信息窗口 }); } </script> </body> </html>
效果展示：
