So verbinden Sie Markierungen auf Google Maps_Javascript-Kenntnisse
google
地图
Dies dient lediglich dazu, Ihnen die Verwendung der Google Maps-API zu erklären, und kann als Einführung betrachtet werden. Aus bestimmten Gründen hat Google sich von allen ferngehalten.
Code kopieren Der Code lautet wie folgt:
html, body, #map-canvas {
Rand: 0;
Polsterung: 0;
Höhe: 100 %;
}
https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">>
<script><br> var-Karte;<br> var poly;<br> Funktion initialize() {<br> var myLatlng = new google.maps.LatLng(31.1937077, 121.4158436);<br> var Standorte = [<br> ['test1, Genauigkeit: 150 m', 31.1937077, 121.4158436, 100],<br> ['test2, Genauigkeit: 150 m', 31.2937077, 121.4158436, 100],<br> ['test3, Genauigkeit: 150 m', 31.0937077, 121.2158436, 100],<br> ['test4, Genauigkeit: 150 m', 31.3937077, 120.4158436, 100],<br> ['test5, Genauigkeit: 150 m', 31.1637077, 120.4858436, 100],<br> ['test6, Genauigkeit: 150 m', 31.1037077, 121.5158436, 100]<br> ];<br> var mapOptions = {<br> Zoom: 13,<br> Mitte: myLatlng,<br> mapTypeId: google.maps.MapTypeId.ROADMAP<br> };<br> map = new google.maps.Map(document.getElementById('map-canvas'),<br> mapOptions);<br> // 线条设置<br> var polyOptions = {<br> StrokeColor: '#00ff00', // 颜色<br> StrokeOpacity: 1.0, // 透明度<br> StrokeWeight: 4 // 宽度<br> }<br> poly = new google.maps.Polyline(polyOptions);<br> poly.setMap(map); // 装载<br> /* 循环标出所有坐标 */<br> /*for(var i=0; i<locations.length; i ){<br /> var loc = [];<br /> loc.push(locations[i][1]);<br /> loc.push(locations[i][2]);<br /> var path = poly.getPath(); //获取线条的坐标<br /> path.push(new google.maps.LatLng(loc[0], loc[1])); //为线条添加标记坐标<br /> //生成标记图标<br /> marker = new google.maps.Marker({<br /> Position: new google.maps.LatLng(loc[0], loc[1]),<br /> Karte: Karte<br /> // Symbol: "<a href="https://maps.gstatic.com/mapfiles/markers/marker_green.png">https://maps.gstatic.com/mapfiles/markers/marker_green.png</a>"<br /> });<br /> }*/<br /> var marker, i, kreis;<br /> var iwarray = [];<br /> var infoWindow;<br /> var latlngbounds = new google.maps.LatLngBounds();<br /> var iconYellow = new google.maps.MarkerImage("<a href="http://maps.google.com/mapfiles/ms/icons/yellow-dot.png">http://maps.google.com/mapfiles/ms/icons/yellow-dot.png</a>");<br /> für (i = 0; i < positions.length; i ) {<br /> var loc = [];<br /> loc.push(locations[i][1]);<br /> loc.push(locations[i][2]);<br /> var path = poly.getPath(); //获取线条的坐标<br /> path.push(new google.maps.LatLng(loc[0], loc[1]));<br /> var latlng = new google.maps.LatLng(locations[i][1], location[i][2]);<br /> latlngbounds.extend(latlng);<br /> if (locations[i][0].indexOf("[Cached") == 0 || (locations[i][0].indexOf("[Multiple") == 0 && location[i][0]. indexOf("[Cached") >= 0 )) {<br> marker = new google.maps.Marker({<br> position: latlng,<br> map: map,<br> icon: iconYellow<br> });<br> 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>';<br> } else {<br> marker = new google.maps.Marker({<br> position: latlng,<br> map: map<br> });<br> 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>';<br> }<br> iwarray[i] = iw;<br> google.maps.event.addListener(marker, 'mouseover', (function(marker,i){<br> return function(){<br> infoWindow = new google.maps.InfoWindow({<br> content: iwarray[i],<br> maxWidth: 200,<br> pixelOffset: new google.maps.Size(0, 0)<br> });<br> infoWindow.open(map, marker);<br> }<br> })(marker,i));<br> google.maps.event.addListener(marker, 'mouseout', function() {<br> infoWindow.close();<br> });<br> circle = new google.maps.Circle({<br> map: map,<br> radius: locations[i][3],<br> fillColor: '#0000AA',<br> fillOpacity: 0.01,<br> strokeWeight: 1,<br> strokeColor: '#0000CC',<br> strokeOpacity: 0.8<br> });<br> circle.bindTo('center', marker, 'position');<br> }<br> map.fitBounds(latlngbounds);<br> var listener = google.maps.event.addListenerOnce(map, "idle", function()<br> {<br> var zoomLevel = parseInt(map.getZoom());<br> if (zoomLevel > 13)<br> map.setZoom(13);<br> });<br> }<br> google.maps.event.addDomListener(window, 'load', initialize);<br> </script>