在Google 地圖上實現做的標記相連接_javascript技巧

這裡只是將Google地圖API的使用方法告訴大家，算是拋磚引玉吧，由於某些原因，谷歌已經遠離大家了。

複製程式碼 程式碼如下:

地理位置標題>



    html、內文、#map-canvas {
        邊距：0；
        填入：0；
        高度：100%；
    }
風格>
">https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">>

    var 映射；
    var 聚；
    函數初始化() {
    var myLatlng = new google.maps.LatLng(31.1937077, 121.4158436);
    var 位置 = [
    ['測試1，精確度：150m', 31.1937077, 121.4158436, 100],
    ['測試2，精確度：150m', 31.2937077, 121.4158436, 100],
    ['測試3，精準度：150m', 31.0937077, 121.2158436, 100],
    ['測試4，精準度：150m', 31.3937077, 120.4158436, 100],
    ['測試5，精準度：150m', 31.1637077, 120.4858436, 100],
    ['測試6，精確度：150m', 31.1037077, 121.5158436, 100]
    ];
    var mapOptions = {
    縮放：13，
    中心：myLatlng，
    地圖類型 ID：google.maps.MapTypeId.ROADMAP
    };
    地圖 = new google.maps.Map(document.getElementById('map-canvas'),
    地圖選項);
    // 線條設定
    var polyOptions = {
    strokeColor: '#00ff00',    // 顏色
    描邊不透明度: 1.0,    // 透明度
    strokeWeight: 4    // 寬度
    }
    poly = new google.maps.Polyline(polyOptions);
    聚.setMap(地圖);    // 裝載
    /* 循環標示所有座標 */
    /*for(var i=0; i     var loc = [];
    loc.push(locations[i][1]);
    loc.push(locations[i][2]);
        var 路徑 = poly.getPath();    //取得線條的座標
        path.push(new google.maps.LatLng(loc[0], loc[1]));    //為線條新增標記座標
    // 產生標記圖示
    標記 = new google.maps.Marker({
        位置： new google.maps.LatLng(loc[0], loc[1]),
        地圖：地圖
        // 圖示: "https://maps.gstatic.com/mapfiles/markers/marker_green.png"
    });
    }*/
    var 標記，i，圓；
    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         var loc = [];
        loc.push(locations[i][1]);
        loc.push(locations[i][2]);
            var 路徑 = 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("[已快取") == 0 || (locations[i][0].indexOf("[Multiple") == 0 &&locations[i][0]. indexOf("[已快取") >= 0 )) {
            標記 = new google.maps.Marker({
                position: latlng,
                map: map,
                icon: iconYellow
            });
            var iw = '

' + locations[i][0] + '

';
        } else {
            marker = new google.maps.Marker({
                position: latlng,
                map: map
            });
            var iw = '

' + locations[i][0] + '

';
        }
        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);



   

身體>