Question

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

该页面由两个Google Maps对象组成，第一个显示所有可用的路线，第二个将在Bootstrap 4模态内将路线显示为多段线。

我设法绘制并显示了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事件处理程序，该事件处理程序将原始的bounds对象和绑定对象的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像素的视口。 / p>

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

我的解决方法是在使用$('#routeModal').on('shown.bs.modal', function (event) {而不是$('#routeModal').on('show.bs.modal', function (event) {完全显示模式时运行Google Maps代码

show事件立即触发，但是show事件等待直到所有css转换完成。随着元素的更新，我最终会出现轻微的屏幕闪烁，值得注意的是，先前的地图仍然短暂显示，但是可以正常工作。

我仍然需要将新版本正确地重新构建到网站中，但是我认为到目前为止我已经反馈了我的发现。

Google Maps API v3 map.fitbounds（bounds）设置地图缩放错误

1 个答案: