3

以下のコードでは、bounds.extend() と map.fitBounds() を使用して、すべてのマーカーに対応するようにマップのサイズを変更しています。マップが start_point を中心としてフォーカスし、適切なレベルまでズームアウトして、すべてのマーカーが表示されることを期待します。

ただし、start_point への最大ズームインになります。そして、geocoder.geocodeコールバック関数で毎回bounds.extend()を(commen)呼び出さないようにしましたが、マーカーを配列に追加し、別のループでbounds.extend()を呼び出しましたが、どちらも機能していません。

マーカーが正常に作成されていることを再確認しました。手動でズームアウトすると、マーカーが表示されます。

mark_pins() は、ここには含めなかった ajax 成功コールバック関数として呼び出されます。

私は何かが恋しいですか？

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


  }
4

1 に答える 1

7

ジオコーダーは非同期です。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);
            }
        });
    }
}

ワーキングフィドル

結果のマップのスクリーンショット

コードスニペット：

var map;
var start_point = new google.maps.LatLng(37.519002, -122.131);
var bounds = new google.maps.LatLngBounds();
var trucks = [{
    address: "Sunnyvale, CA"
}, {
    address: "Palo Alto, CA"
}, {
    address: "Reno, NV"
}, {
    address: "Portland, OR"
}];

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);
    mark_pins(trucks);
}

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);
                map.fitBounds(bounds);
            } else {
                alert('Internal error: ' + status + address);
            }
        });
    }
}
html, body, #map_canvas {
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

于 2014-09-02T10:03:13.053 に答える