Question

我已经从网站上获得了一些代码，并根据我的需要对其进行了修改，现在它正在做我想要做的主要事情，即在地图上列出大约500个标记。问题是它没有缩小和居中，就像它应该是这样我可以看到放置在地图上的所有标记，而是我必须手动缩小以查看所有内容。有人能告诉我哪里出错了吗？

    <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

    </head>

<body>
    <div id="map_canvas" style="width: 600px; height: 600px; margin: 0 auto;"></div>
    <?php

        require 'DB.php';

        $stmt = "SELECT * FROM small";
        $corodinates = array();
        $i = 0;
        foreach($DB->query($stmt) as $row) {

            $corodinates['Latitude'][$i] = $row['Lat'];
            $corodinates['Longitude'][$i] = $row['Long'];
            $corodinates['Address'][$i] = $row['Address'];
            $i++;
        }
    ?>
    <div id="map_canvas"></div>
    <script type="text/javascript">
        var markers = new Array();
        var data = <?php echo json_encode($corodinates); ?>;

        for (var i = 0; i < data.Latitude.length; i++)
        {
            markers[i] = [(data.Latitude[i]), (data.Longitude[i])];
        }       
    </script>

    <script>
        function initialize() {
            var map;
            var bounds = new google.maps.LatLngBounds();
            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(41.8537438, -87.6529606),
                mapTypeId: 'roadmap'
            };

            // Display a map on the page
            map = new google.maps.Map(document.getElementById("map_canvas"), 
            mapOptions);
            map.setTilt(45);

            // Info Window Content

            // Display multiple markers on a map
            var infoWindow = new google.maps.InfoWindow(), marker, i;

            // Loop through our array of markers & place each one on the map  
            for( i = 0; i < markers.length; i++ ) {
                var position = new google.maps.LatLng(markers[i][0], markers[i][1]);
                bounds.extend(position);
                marker = new google.maps.Marker({
                    position: position,
                    map: map
                });

                // Allow each marker to have an info window    
                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infoWindow.setContent(markers[i][2]);
                        infoWindow.open(map, marker);
                    }
                })(marker, i));

                // Automatically center the map fitting all markers on the screen
                map.fitBounds(bounds);
            }
        }
    </script>

    <script>initialize();</script>
</body>

</html>

Answer 1

此代码将按照以下说法执行：

        // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
        var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
            this.setZoom(14);
            google.maps.event.removeListener(boundsListener);
        });

如果希望fitBounds显示所有标记，请将其删除。

Google地图不会使屏幕上的所有标记居中和适合

1 个答案: