Google Maps geocode() 循環放置標記

Question

我有一個包含位置數據的數組，其中一個項目是地址 - 即。 “加利福尼亞州舊金山市大街 123 號”。 我想取那個地址，把它變成坐標，然后用這些坐標到 plot map 上的一個標記。 為此，我知道我需要使用geocode() ，所以我將該部分添加到我的循環中。

如果我在數組中使用緯度和經度而不是地址，我可以讓它正常工作。 但是，由於我在循環中添加了geocode() ，我只能獲取數組中的第一個位置來顯示標記。

我在這里看到了一些類似的問題，建議使用callback()但我不明白。 我還看到了一個建議，將geocode()延遲 0.5 秒，這對海報有效，但評論說它可能不會以較慢的互聯網速度加載所有位置。

如何解決此問題以正確顯示所有位置？

// Create the map with markers.
function createmap(zoomlevel, centerpos, showDot)
{
    // Create the map canvas with options.
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        scrollwheel: false,
        draggable: true,
        mapTypeControl: false,
        zoom: zoomlevel,
        center: new google.maps.LatLng(40.577453, 2.237408),  // Center the map at this location. 
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
    var marker, i;

    // For each location in the array...
    for (i = 0; i < locations.length; i++)
    {  
        // Get the coordintes for the address.
        var geocoder = new google.maps.Geocoder();

        var address = locations[i][5];  // ***This variable will output the address.***

        geocoder.geocode( { 'address': address }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var location_latitude  = results[0].geometry.location.lat();
                var location_longitude = results[0].geometry.location.lng();

                // Create the map marker icon (SVG file).
                var marker_icon = {
                    url: '//'+domain+'/__NEW__/_backend/assets/img/map-marker.svg',
                    anchor: new google.maps.Point(25,50),
                    scaledSize: new google.maps.Size(50,50)
                }

                // Place the marker on the map.
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(location_latitude, location_longitude),
                    map: map,
                    icon: marker_icon
                });
            } 
        }); 
    }
}

Answer 1

這就是我在谷歌地圖上放置 map 標記的方式：

<script type="text/javascript">
    let map;
    let parameters;
    function initMap() {
        map = new google.maps.Map(document.getElementById("map"), {
            center: { lat: @Model.Latitude , lng: @Model.Longitude },
            zoom: @Model.Zoom,
        });
        @foreach (var asset in dbService.Assets)
        {
            @if (asset.State != Models.AssetState.deleted)
            {
                @:parameters = 'Id = @asset.Id\n' + 'Temperature = @asset.Temperature\n' + 'Moisture = @asset.Moisture\n';
                @:setMarker('@asset.Latitude', '@asset.Longitude', '@asset.State');
            }
        }
    }

    function getIconByState(state) {
        if (state == 'non_functional') {
            return 'non-functional.png';
        }
        else if (state == 'under_maintenance') {
            return 'under-maintenance.png';
        }
        else if (state == 'functional') {
            return 'functional.png';
        }
    }

    function setMarker(lat, lng, state) {
        var markerjs = new google.maps.Marker({
            icon: getIconByState(state),
            position: new google.maps.LatLng(lat, lng),
        });
        markerjs.setMap(map);
        let infowindow = new google.maps.InfoWindow({
            content: parameters,
        });
        markerjs.addListener("click", () => {
            infowindow.open(map, markerjs);
        });
    }
</script>

//this is how to use the callback
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=initMap&libraries=&v=weekly"
        defer></script>

在這段代碼中，我使用緯度和經度在 Map 上放置一個標記。

如果要從地址中提取經緯度，請按以下方式使用地理編碼器 API：

<script type="text/javascript">
    function setCoordinates() {
        let address = document.getElementById('zip').value;
        if (address) {
            let geocoder = new google.maps.Geocoder();
            if (geocoder) {
                geocoder.geocode({ 'address': address }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        document.getElementById('latitude').value = results[0].geometry.location.lat();
                        document.getElementById('longitude').value = results[0].geometry.location.lng();
                    }
                    else {
                        console.log('geocoding failed');
                    }
                });
            }
        }
        else {
            alert('Please enter postal code to use this functionality');
        }
    }
</script>