Fatal编程技术网
  • javascript/
  • Javascript 谷歌地图没有在屏幕上居中和安装所有标记

Javascript 谷歌地图没有在屏幕上居中和安装所有标记

javascript google-maps google-maps-api-3

Javascript 谷歌地图没有在屏幕上居中和安装所有标记,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我从一个网站上获取了一些代码，并对其进行了修改以满足我的需要。现在，它正在做我打算用它做的主要事情，即在地图上列出大约500个标记。问题是它没有像应该的那样缩小和居中，以便我可以看到地图上放置的所有标记，相反，我必须手动缩小以查看所有内容。有人能告诉我哪里出了问题吗 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-

我从一个网站上获取了一些代码，并对其进行了修改以满足我的需要。现在，它正在做我打算用它做的主要事情，即在地图上列出大约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>


简单标记
html，正文，#地图画布{
身高：100%；
边际：0px；
填充：0px
}
var markers=新数组（）；
var数据=；
对于（var i=0；i
此代码将执行它所说的操作：

        // 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显示所有标记，请删除它。

我在代码中发现javascript错误<代码>未捕获语法错误：意外标记，
未捕获引用错误：标记未定义行66
，也许您可以发布从PHP生成的HTML。代码看起来正确，所有标记位置都“有效”吗？我没有收到代码中的任何错误，但根据您的建议，我用更新的代码更新了我的问题。现在我遇到了一个问题，当我点击一个标记打开一个信息窗口时，它不会将它锚定到标记上，我看到信息窗口的最底部出现在
地图画布的左上角。你知道为什么吗？你问题中的代码仍然包含我们无法运行的PHP，从这里开始：