谷歌地圖：動態標記定位地圖

Question

我試圖確保地圖以動態添加的標記爲中心。標記本身完美地添加到地圖中，但地圖仍然居於太平洋中部。我不認爲按照正確的順序啓動界限。

這裏是我的地圖代碼：

<script> 

    var map, bounds, locations, markers; 

    function initMap() { 

     map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 3, 
      center: {lat: -28.024, lng: 140.887} 
     }); 

     google.maps.event.addListenerOnce(map, 'idle', function() { 
      bounds = new google.maps.LatLngBounds(); 
      loadAllProperties(); 
     }); 

    } 

    function loadAllProperties() { 

     $.post("/wp-admin/admin-ajax.php", {action: 'get_all_properties'}, function(result) { 
      locations = JSON.parse(result); 
      createMarkers(); 
     }); 

    } 

    function createMarkers() { 

     var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 

     markers = locations.map(function(location, i) { 

      return new google.maps.Marker({ 
       position: location, 
       label: labels[i % labels.length] 
      }); 

      bounds.extend(location); 

     }); 

     map.fitBounds(bounds); 

     // Add a marker clusterer to manage the markers. 
     var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
    } 

</script> 

Answer 1

您擴展邊界......以前那麼界限始終是空的您在返回的標記。重新排序代碼以首先擴展邊界。

function createMarkers() { 
    var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 
    markers = locations.map(function(location, i) { 
     bounds.extend(location); 
     return new google.maps.Marker({ 
      position: location, 
      label: labels[i % labels.length] 
     }); 
    }); 
    map.fitBounds(bounds); 
    // Add a marker clusterer to manage the markers. 
    var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
}