これは、Google Maps API の使用方法を説明するためのものであり、いくつかの理由により、Google は一般の人から遠ざけられています。 コードをコピー コードは次のとおりです: <頭> 地理的位置 <スタイル> html、本文、#map-canvas { マージン: 0; パディング: 0; 高さ: 100%; } </script">https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script</a>><br> <スクリプト><br> var マップ;<br> var ポリ;<br> 関数初期化() {<br> var myLatlng = 新しい google.maps.LatLng(31.1937077, 121.4158436);<br> var location = [<br> ['test1、精度: 150m'、31.1937077、121.4158436、100]、<br> ['test2、精度: 150m'、31.2937077、121.4158436、100]、<br> ['test3、精度: 150m'、31.0937077、121.2158436、100]、<br> ['test4、精度: 150m'、31.3937077、120.4158436、100]、<br> ['test5、精度: 150m'、31.1637077、120.4858436、100]、<br> ['test6、精度: 150m'、31.1037077、121.5158436、100]<br> ];<br> var mapOptions = {<br> ズーム: 13、<br> 中央: myLatlng、<br> MapTypeId: google.maps.MapTypeId.ROADMAP<br> };<br> map = new google.maps.Map(document.getElementById('map-canvas'),<br> マップオプション);<br> // 線条设置<br> var PolyOptions = {<br> ストロークカラー: '#00ff00', // 颜色<br> ストローク不透明度: 1.0, // 透明度<br> ストロークウェイト: 4 // 宽度<br> }<br> Poly = new google.maps.Polyline(polyOptions);<br> ポリ.setMap(マップ); // 装填<br> /* 循環标出全部坐标 */<br> /*for(var i=0; i<locations.length i></locations.length> var loc = [];<br> loc.push(場所[i][1]);<br> loc.push(場所[i][2]);<br> var パス = Poly.getPath(); //获取線条の坐标<br> path.push(new google.maps.LatLng(loc[0], loc[1])); //線条追加标记坐标<br> // 生成标记图标<br> マーカー = 新しい google.maps.Marker({<br> 位置: 新しい google.maps.LatLng(loc[0], loc[1]),<br> 地図: 地図<br> // アイコン: "<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 マーカー、i、円;<br> var iwarray = [];<br> var infoWindow;<br> var latlngbounds = 新しい 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> for (i = 0; i < location.length; i ) {<br /> var loc = [];<br /> loc.push(場所[i][1]);<br /> loc.push(場所[i][2]);<br /> var パス = Poly.getPath(); //获取線条の坐标<br /> path.push(new google.maps.LatLng(loc[0], loc[1]));<br /> var latlng = new google.maps.LatLng(場所[i][1], 場所[i][2]);<br /> latlngbounds.extend(latlng);<br /> if (locations[i][0].indexOf("[キャッシュ") == 0 || (locations[i][0].indexOf("[Multiple") == 0 && location[i][0]。 IndexOf("[キャッシュ済み") >= 0 )) {<br /> マーカー = 新しい 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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
