Question

我的网页上有一张谷歌地图。它完全正常，但我向每个国家展示了一些标记。当窗口宽度大于577px时，它显示正常。但是当窗口是（window.innerWidth＆lt; 577）时，我的地图的一半没有显示。（用户应该滚动地图以访问所有标记）有没有什么方法可以向我的地图显示小浏览器中所有标记的完整程度？

这是我用于谷歌地图的java脚本代码

 if (typeof zoom === "undefined") {
    zoom = 12;
}
var center = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var map = new google.maps.Map(document.getElementById('map'), {
    zoom: zoom,
    scrollwheel: false,
    center: center,

    mapTypeId: google.maps.MapTypeId.ROADMAP
});

我尝试通过在其上添加此代码来更改缩放

var w = window.innerWidth;
if (w < 577) {
  map.setZoom(5);
}

但问题是某些标记不再显示，感谢任何帮助。

Answer 1

这是两个问题中的一个。

1）您的地图对于您正在查看的设备来说太宽了。

你应该设置max-width：100％;在CSS中的地图元素上

2）地图正在调整为新的设备宽度，但没有重新居中

在创建边界对象时将每个标记中心添加到边界对象...

const oMap = new google.maps.Map(...);
const oBounds = new google.maps.LatLngBounds();
for(...) {
    const oCentre = new google.maps.LatLng({
        lat: fLatitude,
        lng: fLongitude
    });

    const oMarker = new google.maps.Marker({
        position: oCentre,
        map: oMap
    });

    oBounds.extend(oCentre);
}

然后在设备调整大小时重新居中地图...

window.addEventListener('resize', oEvent => {
    oMap.fitBounds(oBounds);
});

如何使谷歌地图用户友好和响应网页

1 个答案: