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

Question

我设法拼凑了一个脚本，从 MySQL 数据库中提取 lat/long 和标记的名称，这是通过 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>

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

希望对您有所帮助！

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

How to set center and zoom of Google Map to cover all markers generated from Wordpress database

javascript

wordpress

google-maps

google-maps-api-3

google-maps-markers