谷歌地图：动态标记定位地图

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