如何设置谷歌地图的中心和缩放以覆盖从 Wordpress 数据库生成的所有标记答案

【问题标题】：How to set center and zoom of Google Map to cover all markers generated from Wordpress database如何设置谷歌地图的中心和缩放以覆盖从 Wordpress 数据库生成的所有标记
【发布时间】：2020-09-04 05:07:58
【问题描述】：

我已经设法拼凑出一个脚本，该脚本从 MySQL 数据库中提取标记的纬度/经度和名称，这是通过 Wordpress WPDB get_results 查询。

然后通过 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>

【问题讨论】：

标签： javascript wordpress google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

您应该定义边界对象并在 for 循环之外调用 fitBounds()，因为目前您定义了新的边界实例并在每次迭代时应用 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);

我希望这会有所帮助！

【讨论】：