Question

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

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

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

我真的需要让这个工作完全被困住。

有什么想法吗？

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

发生＆＃34;长＆＃34;在此之后：

map.fitBounds(markerBounds);

我希望它是可以理解的，现在你可以自己动手了。寻找jQuery的承诺。

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

Answer 2

要解决您的问题，请将回调函数中的map.fitBounds调用到异步地理编码操作。

工作代码段：

＆＃13;

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

＆＃13;

html,
body,
#map {
  height: 100%;
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map"></div>

＆＃13;

Answer 3

$.getJSON函数在for循环中执行异步调用，这意味着您将对Google地图进行多次不同的调用。

最好的解决方案，恕我直言，是在最后一次循环迭代中通过fitBounds()设置视口（在大多数情况下，这将在最后一次运行，除非其中一个请求滞后）。更改视口一次更有效，而不是每次调用Google地图，因为当您有大量地理定位请求时，互联网连接速度较慢的用户可能会看到地图来回传递。

因此，您的代码可以更改为：

(...)

var threadCounter = 0;
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 p = data.results[0].geometry.location;
      var latlng = new google.maps.LatLng(p.lat, p.lng);
      (...)
      markerBounds.extend(latlng);
      (...)
      makeInfoWindowEvent(map, infowindow, marker);

      // Set the viewport in the last call to Google Maps
      if (threadCounter == addresses.length - 1)
        map.fitBounds(markerBounds);

      threadCounter++;
    });
}

修改：根据以下评论更正了代码

在显示地图引脚之前，Google地图需要刷新页面

3 个答案: