时间戳

首页 > 解决方案 > 我的 Google JavaScript 地图会因浏览器和计算机的不同而不同

javascript - 我的 Google JavaScript 地图会因浏览器和计算机的不同而不同

问题描述

我正在使用 Google Maps API，特别是“Maps JavaScript API”，并且我已经完成了大部分 JavaScript 代码，并且地图显示在我的浏览器 (Chrome) 中。

但问题是，当我在 Firefox 浏览器中打开文件时，或者当我在其他计算机的 Chrome 浏览器中打开相同的文件时……地图不会​​以正确的方式显示。主要问题在于缩放功能。

在我的 Chrome 上，地图将显示如下：

在此处输入图像描述 在 Firefox 或其他一些计算机上，地图将显示如下： 在此处输入图像描述 我尝试以不同的方式更改代码，并再次阅读 Google 文档。我尝试使用不同的变体

map.fitBounds(bounds);
map.panToBounds(bounds);

但我并没有从中得到任何好的结果。

这是完整的代码

<div class="ui-panelgrid-cell ui-g-12 ui-md-12">
    <style>
        #map {
            height: -webkit-fill-available;
            display: block;
            position: static !important;
        }

        body #mapOverFlow .ui-dialog .ui-dialog-content {
            overflow: hidden;
        }

    </style>
    <div id="map" style="position: relative; overflow: hidden;"></div>
    <script>
        function initialize() {
            var userCoor = [
                ["<div><h1>JLSKYLL REDES</h1><div><p></p><p><b>22246338</b></p></div></div>", 9.381300800000002, -
                    84.14509079999999
                ],
                ["<div><h1>Lirio Lodge</h1><div><p>Lirio Lodge is the ideal place for lovers of nature, has a privileged location in front of the beautiful Laguna Madre of God, in the channels of Tortuguero.</p><p><b>22825003</b></p></div></div>",
                    9.94591, -84.11847569999999
                ]
            ];

            var mapOptions = {
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                zoom: 2
            };
            var marker, i, userCoordinate, map;
            var bounds = new google.maps.LatLngBounds();

            map = new google.maps.Map(document.getElementById("map"), mapOptions);

            var userCoorPath = [new google.maps.LatLng(9.381300800000002, -84.14509079999999), new google.maps.LatLng(
                9.94591, -84.11847569999999)];

            userCoordinate = new google.maps.Polyline({
                path: userCoorPath,
                strokeColor: "#FF0000",
                strokeOpacity: 1,
                strokeWeight: 2
            });

            userCoordinate.setMap(map);

            var infowindow = new google.maps.InfoWindow();

            for (i = 0; i < userCoor.length; i++) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(userCoor[i][1], userCoor[i][2]),
                    map: map
                });

                var loc = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
                bounds.extend(loc);

                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                    return function () {
                        infowindow.setContent(userCoor[i][0]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            }

            center = bounds.getCenter();
            map.fitBounds(bounds);
            map.panToBounds(bounds);
        }

    </script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initialize">
    </script>
</div>

当您打开文件并添加 API_KEY 时，该地图应显示在您的浏览器中。现在它可能会随着缩放出现，或者我可以出现在很远的地方。

在 Firefox 和 Chrome 中尝试。

标签： javascriptgoogle-maps

解决方案

您的地图没有center设置。请注意，这是一个必需参数，但您永远不会将值分配center = bounds.getCenter()给您的地图实例。尝试添加以下代码：

const center = bounds.getCenter();
map.setCenter(center);

此外，您的地图的缩放级别为 2。如果您不希望地图显示得太远，请将其更改为例如 8。

var mapOptions = {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 8
};

看看这个jsfiddle以获得演示和指导。无论浏览器如何，它都可以工作。

希望这对您有所帮助。

推荐阅读