与Google Maps API V3 MAP.FITBOUNDS(边界)设置映射缩放错误

Question

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

该页面由两个Google Maps对象组成，第一个显示所有可用路线，第二个路由将显示为bootstrap 4 Modal内部的多线线。

我设法绘制并显示了GPX点，每个点都扩展了一个绑定的对象。

但是，当我调用fitbounds（）方法时，通常会第一次工作并正确设置缩放和中心，任何后续的调用到同一路由或其他路由都会设置缩放完全错误。当所有路线位于英国时

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事件处理程序，该处理程序将界限的原始对象和绑定对象的ne/sw拐角记录到控制台。

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

预期的结果是我绘制的路线的正确缩放和以中心的视口，我实际上基于控制台日志很有趣。

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 Maps更新。

但是，虽然模态关闭，但它的 display元素设置为 none，这有效地表示div大小为0，因此地图被渲染并缩放到0个像素的视口。

作为参考，我的代码的先前版本使用了固定地图缩放级别，但这对地图的外观有些打击。

我的修复程序是在使用$('#routeModal').on('shown.bs.modal', function (event) {而不是$('#routeModal').on('show.bs.modal', function (event) {

完全显示模式时运行Google Maps代码

表演事件立即触发，但是显示的事件等待直到所有CSS过渡都完成。当元素更新时，我最终得到了一个轻微的屏幕闪存，明显的是，以前的地图仍短暂显示，但可以正常显示。

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