这里仅仅是将谷歌地图API的使用方法告诉大家,算是抛砖引玉吧,由于某些原因,谷歌已经远离大家了。
<!DOCTYPE html> <html> <head> <title>GeoLocation</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html, body, #map-canvas { margin: 0; padding: 0; height: 100%; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script> var map; var poly; function initialize() { var myLatlng = new google.maps.LatLng(31.1937077, 121.4158436); var locations = [ ['test1, accuracy: 150m', 31.1937077, 121.4158436, 100], ['test2, accuracy: 150m', 31.2937077, 121.4158436, 100], ['test3, accuracy: 150m', 31.0937077, 121.2158436, 100], ['test4, accuracy: 150m', 31.3937077, 120.4158436, 100], ['test5, accuracy: 150m', 31.1637077, 120.4858436, 100], ['test6, accuracy: 150m', 31.1037077, 121.5158436, 100] ]; var mapOptions = { zoom: 13, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // 线条设置 var polyOptions = { strokeColor: '#00ff00', // 颜色 strokeOpacity: 1.0, // 透明度 strokeWeight: 4 // 宽度 } poly = new google.maps.Polyline(polyOptions); poly.setMap(map); // 装载 /* 循环标出所有坐标 */ /*for(var i=0; i<locations.length; i++){ var loc = []; loc.push(locations[i][1]); loc.push(locations[i][2]); var path = poly.getPath(); //获取线条的坐标 path.push(new google.maps.LatLng(loc[0], loc[1])); //为线条添加标记坐标 //生成标记图标 marker = new google.maps.Marker({ position: new google.maps.LatLng(loc[0], loc[1]), map: map // icon: "https://maps.gstatic.com/mapfiles/markers/marker_green.png" }); }*/ var marker, i, circle; var iwarray = []; var infoWindow; var latlngbounds = new google.maps.LatLngBounds(); var iconYellow = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"); for (i = 0; i < locations.length; i++) { var loc = []; loc.push(locations[i][1]); loc.push(locations[i][2]); var path = poly.getPath(); //获取线条的坐标 path.push(new google.maps.LatLng(loc[0], loc[1])); var latlng = new google.maps.LatLng(locations[i][1], locations[i][2]); latlngbounds.extend(latlng); if (locations[i][0].indexOf("[Cached") == 0 || (locations[i][0].indexOf("[Multiple") == 0 && locations[i][0].indexOf("[Cached") >= 0 )) { marker = new google.maps.Marker({ position: latlng, map: map, icon: iconYellow }); var iw = '<div style="font-size: 12px;word-wrap:break-word;word-break:break-all;"><strong><font color="#FF0000">' + locations[i][0] + '<font></strong><div>'; } else { marker = new google.maps.Marker({ position: latlng, map: map }); var iw = '<div style="font-size: 12px;word-wrap:break-word;word-break:break-all;"><strong><font color="#000000">' + locations[i][0] + '<font></strong><div>'; } iwarray[i] = iw; google.maps.event.addListener(marker, 'mouseover', (function(marker,i){ return function(){ infoWindow = new google.maps.InfoWindow({ content: iwarray[i], maxWidth: 200, pixelOffset: new google.maps.Size(0, 0) }); infoWindow.open(map, marker); } })(marker,i)); google.maps.event.addListener(marker, 'mouseout', function() { infoWindow.close(); }); circle = new google.maps.Circle({ map: map, radius: locations[i][3], fillColor: '#0000AA', fillOpacity: 0.01, strokeWeight: 1, strokeColor: '#0000CC', strokeOpacity: 0.8 }); circle.bindTo('center', marker, 'position'); } map.fitBounds(latlngbounds); var listener = google.maps.event.addListenerOnce(map, "idle", function() { var zoomLevel = parseInt(map.getZoom()); if (zoomLevel > 13) map.setZoom(13); }); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html>