javascript - Google Maps API v3 map.fitbounds(bounds) 设置 map 缩放不正确的问题

Question

我正在使用 Google Maps API v3 使用从上传到我的网站的 GPX 文件中提取的数据来显示步行路线。

该页面由两个 Google map 对象组成，第一个显示所有可用路线，第二个将在 Bootstrap 4 模式中将路线显示为折线。

我已经成功绘制并显示了 GPX 点，并且每个点都扩展了一个绑定(bind)对象。

但是，当我调用 fitbounds() 方法时，它通常会第一次工作并正确设置缩放和中心，任何后续对同一路线或不同路线的调用都会将缩放设置完全错误。当所有航线都以英国为基地时，通常西南 Angular 位于墨西哥附近的海洋中，东北 Angular 位于俄罗斯北部的某个地方。

mapData.RoutePins 包含纬度和经度坐标的 JSON 对象。

var routemap = new google.maps.Map(document.getElementById('route'), mapOptions);

var routebounds = new google.maps.LatLngBounds();

mapData.RoutePins.forEach(function (RoutePin) {
    polylinedata.push({ lat: RoutePin.Latitude, lng: RoutePin.Longitude });
    routebounds.extend({ lat: RoutePin.Latitude, lng: RoutePin.Longitude });
});

routemap.fitBounds(routebounds);

polyline = new google.maps.Polyline({
    path: polylinedata,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: routemap
});

为了尝试找到问题，我添加了一个bounds_changed事件处理程序，它将原始边界对象和绑定(bind)对象的东北/西南 Angular 记录到控制台。

google.maps.event.addListener(routemap, 'bounds_changed', function (event) {
    console.log(routemap.getBounds() + "\nNE: " + routebounds.getNorthEast() + "\nSW: " + routebounds.getSouthWest());
});

预期的结果是我绘制的路线的正确缩放和居中视口(viewport)，但我实际上根据控制台日志得到的结果很有趣。

Map Initialized:
getBounds(): ((0, 0), (0, 0))
NE: (-1, -180)
SW: (1, 180)

After fitbounds():
getBounds(): ((15.190468336327566, -97.72890624999991), (74.04118207833291, 96.68515625000009))
NE: (53.7738, -0.44322999999997137)
SW: (53.71267, -0.6005199999999604)

getBounds 坐标代表实际显示的内容，但 NE 和 SW 坐标是应该显示的内容。

出了什么问题？

Answer 1

花了一些时间重建和调整页面，我想我已经发现了这个问题，一旦我意识到这个问题就变得稍微明显了。

为了尝试避免模式对话框淡出打开时屏幕闪烁，我一直在尝试在触发模式之前运行所有 Google map 更新。

但是，当模式关闭时，它的 display 元素设置为 none，这实际上意味着 div 大小为 0，因此 map 会被渲染并缩放到0 像素的视口(viewport)。

作为引用，我的代码的先前版本使用了固定的 map 缩放级别，但对于 map 的外观来说，这有点碰运气。

我的解决方法是在模态完全显示时使用 $('#routeModal').on('shown.bs.modal', function (event) { 运行 Google map 代码比 $('#routeModal').on('show.bs.modal', 函数(事件){

show 事件会立即触发，但 shown 事件会等待所有 css 转换完成。随着元素更新，我最终看到了轻微的屏幕闪烁，值得注意的是之前的 map 仍然短暂显示，但它可以工作。

我仍然需要将新版本正确地构建回网站，但我想我会反馈到目前为止的发现。