javascript - 谷歌地图需要刷新页面才能显示 map 图钉

Question

我有这个代码可以在谷歌地图上显示多个地址。

问题是，当页面首次加载时， map 显示蓝色的大海并且不对地址进行地理编码，我想它正在使用 0,0 的经纬度。

当我重新加载页面时，它会找到地址并将其显示在 map 上。如果然后我离开该页面并返回到该页面，我想，由于缓存，它也可以工作。

我真的需要让它正常工作，但我完全被难住了。

有什么想法吗？

function initialize() {

    var addresses = [ '60 Hednesford Road Cannock West Midlands WS11 1DJ','172 High Street Bloxwich West Midlands WS3 3LA',];

    var myOptions = {
        zoom: 10,
        center: new google.maps.LatLng(0, 0),
        mapTypeId: 'roadmap'
    }

    var map = new google.maps.Map($('#map')[0], myOptions);

    var markerBounds = new google.maps.LatLngBounds();

    var infoWindow = new google.maps.InfoWindow();

    function makeInfoWindowEvent(map, infowindow, marker) {
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
        });
    }

    for (var x = 0; x < addresses.length; x++) {
        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
            var icon = { 
                url: 'http://melbourne.cvsdevelopment.co.uk/wp-content/themes/cvs-main/assets/img/icon-map.png'
            };
            var p = data.results[0].geometry.location;
            var latlng = new google.maps.LatLng(p.lat, p.lng);
            var adress = data.results[0].formatted_address;
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                icon: icon
            });
            markerBounds.extend(latlng);
            var infowindow = new google.maps.InfoWindow({
                content: adress
            });
            makeInfoWindowEvent(map, infowindow, marker);

        });
    }

    map.fitBounds(markerBounds);

}
google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

我没有时间测试我的陈述是否正确，但我相信问题在于 $.getJSON 对 Google API 进行异步调用。因此:

markerBounds.extend(latlng);

在此之后“很长时间”发生:

map.fitBounds(markerBounds);

我希望它是可以理解的，并且你现在可以让它自己工作。寻找 jQuery 的 promise 。

如果您需要更多帮助，请告诉我，我稍后可能会提供。