Google地图未居中并适合屏幕上的所有标记

Question

I have gotten some code off a website and modified it to suit my needs right now it is doing the main thing I was intending to do with it which is to list about 500 markers on a map. 我已经从某个网站上获取了一些代码，并对其进行了修改以满足自己的需求，现在它正在做我打算做的主要工作，即在地图上列出约500个标记。 The problem is that it is not zoomed out and centered like it should be so that I can see all the markers placed on the map, instead I have to manually zoom out to see everything. 问题在于，它没有像应有的那样缩小并居中，以便我可以看到放置在地图上的所有标记，而必须手动缩小以查看所有内容。 Can someone tell me where I went wrong? 有人可以告诉我我哪里出问题了吗？

    <!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

This code is going to do what it says: 这段代码将按照其说明进行操作：

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

Remove it if you want the fitBounds to show all the markers. 如果要使fitBounds显示所有标记，请将其删除。

Google地图未居中并适合屏幕上的所有标记

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-01-26 16:52:54

Google地图未居中并适合屏幕上的所有标记

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-01-26 16:52:54

解决方案1
1 已采纳 2014-01-26 16:52:54