Javascript 如何使谷歌地图在网页上变得友好和响应性强

我的网页上有谷歌地图。它工作得非常好，但我用一些标记向每个国家展示。窗口宽度大于

577px

时显示良好。但是当window是（window.innerWidth时，这是两个问题之一

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

您应该设置最大宽度：100%；在CSS中的map元素上

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

---

在生成地图之前，是否尝试设置缩放？我的意思是，不是做

map.setZoom（5）

，而是做

zoom=5，在声明可能重复的映射之前，我现在尝试。结果是一样的。我的地图当然变小了，而且很好，但是一些标记被省略了。当我点击该区域时，我可以访问所有标记@MarceloOrigoni@geocodezip这似乎很有帮助，但我对谷歌地图还不熟悉，完全不明白这一点。我不知道我的代码应该有什么变化？我的问题不是将其中一个坐标居中，问题是我需要在小浏览器中显示它们
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);
});