如何设置Google Map的中心和缩放以覆盖从Wordpress数据库生成的所有标记

Question

我设法通过Wordpress WPDB get_results查询将一个从MySQL数据库提取标记的经/纬度和名称的脚本拼凑在一起。

然后通过JSON解析数据，并将标记添加到地图。这样可以正常工作，并且标记会添加到地图中。

但是，我也在尝试自动居中和自动缩放以使所有标记都适合视野，这部分代码似乎无效，它只是将地图中心设置为0.0,0.0 。

有人知道我要去哪里了吗？我研究了这里的许多其他问题，并尝试了几个小时来对其进行调整，以使其无法成功工作。

任何帮助将不胜感激，谢谢！

        <?php
        global $wpdb;
        $data = $wpdb->get_results( 
        "
        SELECT marker_name, marker_lat, marker_long 
        FROM rwc_web_gurus
        WHERE var_type = 'marker' 
        "
        );
    ?>
    <div id="map"></div>
    <script type='text/javascript'>
     function initMap() {

        var latlng = new google.maps.LatLng(<?php echo $focuslatcurrent; ?>, <?php echo $focuslongcurrent; ?>); // default location
        var myOptions = {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
        };

        //INITIALISE MAP MARKERS
        var map = new google.maps.Map(document.getElementById('map'),myOptions);
        var infowindow = new google.maps.InfoWindow(), marker, lat, lng;
        var json=JSON.parse('<?php echo(json_encode($data));?>');
        for( var o in json ){

            lat =json[ o ].marker_lat;
            lng=json[ o ].marker_long;
            name=json[ o ].marker_name;

            marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat,lng),
                name:name,
                map: map
            }); 

            // extend bounds
            var bounds = new google.maps.LatLngBounds();
            for(i=0;i<marker.length;i++) {
               bounds.extend(marker[i].getPosition());
            }


            //set center and zoom
            google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
              this.setZoom(map.getZoom()-1);

              if (this.getZoom() > 15) {
                this.setZoom(15);
              }
            });
            map.fitBounds(bounds);

            google.maps.event.addListener( marker, 'click', function(e){
                infowindow.setContent( this.name );
                infowindow.open( map, this );
            }.bind( marker ) );
        }
    }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=<?php echo $apikeycurrent; ?>&callback=initMap">
    </script>

Answer 1

您应该定义bounds对象，并在fitBounds()循环之外调用for，因为当前您定义新的bounds实例并在每次迭代中应用fitBounds（）。

以这种方式执行

//INITIALISE MAP MARKERS
var map = new google.maps.Map(document.getElementById('map'),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, lat, lng;
var json=JSON.parse('<?php echo(json_encode($data));?>');
var bounds = new google.maps.LatLngBounds();
for( var o in json ){
    lat =json[ o ].marker_lat;
    lng=json[ o ].marker_long;
    name=json[ o ].marker_name;

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat,lng),
        name:name,
        map: map
    }); 

    // extend bounds
    bounds.extend(marker.getPosition());

    //set center and zoom
    google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
        this.setZoom(map.getZoom()-1);

        if (this.getZoom() > 15) {
            this.setZoom(15);
        }
    });

    google.maps.event.addListener( marker, 'click', function(e){
            infowindow.setContent( this.name );
            infowindow.open( map, this );
    }.bind( marker ));
} 
map.fitBounds(bounds);

我希望这会有所帮助！