javascript 谷歌地图 map.fitBounds() 和 bounds.extend() 没有按预期工作。

google map map.fitBounds() and bounds.extend() are not working as expected.

提问by WX888_88

I have a piece of code below which is using bounds.extend() and map.fitBounds() to resize the map to accommodate all markers. I would expect the map could focus to start_point as a center and zoom out to a appropriate level so every markers would be seen.

我在下面有一段代码，它使用 bounds.extend() 和 map.fitBounds() 来调整地图的大小以容纳所有标记。我希望地图可以以 start_point 为中心并缩小到适当的级别，以便可以看到每个标记。

However, it ends up a maximum zoom in to start_point. And I tried to (commen)not call bounds.extend() every time in geocoder.geocode callback function but add the marker into an array and call bounds.extend() in a separate loop which is not working either.

但是，它最终会最大程度地放大到 start_point。我试图（commen）不每次在 geocoder.geocode 回调函数中调用 bounds.extend() 而是将标记添加到一个数组中并在一个单独的循环中调用 bounds.extend() ，这也不起作用。

I double checked the markers are created successfully and I can see them if I zoom out manually.

我仔细检查了标记是否成功创建，如果我手动缩小我可以看到它们。

mark_pins() is invoked as a ajax success callback function which I didn't include here.

mark_pins() 被调用为 ajax 成功回调函数，我没有在这里包含。

Do I miss anything?

我想念什么吗？

   var map;
   var start_point = new google.maps.LatLng(37.519002, -122.131);
   var bounds = new google.maps.LatLngBounds();


   function initialize() {
    var map_canvas = document.getElementById('map_canvas');

    var map_options = {
      center: start_point,
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(map_canvas, map_options);

  }

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


  function mark_pins(trucks){
    var geocoder = new google.maps.Geocoder();
    var markersArray = [];


    for (i = 0; i < trucks.length; i++) {
      // iterate each truck address
      geocoder.geocode( { 'address' : trucks[i]['address']}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
              var marker = new google.maps.Marker({
                  map: map,
                  position: results[0].geometry.location
              });
              marker.setMap(map);
              bounds.extend(results[0].geometry.location);
              //markersArray.push(marker);

          } else {
              alert('Internal error: ' + status + address);
          }
      });
    }
    var bounds = new google.maps.LatLngBounds();


    for (i = 0; i< markersArray.length; i++) {
      //code
      //bounds.extend(new google.maps.LatLng(markersArray[i][1], markersArray[i][2]));
    }
    bounds.extend(start_point);
    map.setCenter(start_point);

    map.fitBounds(bounds);


  }

回答by geocodezip

The geocoder is asynchronous. Your code calls map.fitBounds(bounds)before the results have come back. The posted code also never calls the mark_pins function.

地理编码器是异步的。您的代码map.fitBounds(bounds)在结果返回之前调用。发布的代码也从不调用 mark_pins 函数。

function mark_pins(trucks) {
    var geocoder = new google.maps.Geocoder();
    var markersArray = [];


    for (i = 0; i < trucks.length; i++) {
        // iterate each truck address
        geocoder.geocode({
            'address': trucks[i]['address']
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                marker.setMap(map);
                bounds.extend(results[0].geometry.location);
                map.fitBounds(bounds);
            } else {
                alert('Internal error: ' + status + address);
            }
        });
    }
}

working fiddle

工作小提琴