Question

我正在为页面添加地图，但地图总是偏离给定坐标的中心。可能相关的一些有趣的额外信息是越远（缩小），差异越大。我已经围绕其他线程进行了一些研究，我发现有很多建议使用map.getCenter()，但要么这不是解决方案，要么我误用了，因为它不起作用。

这是我正在使用的代码（无耻地使用谷歌地图教程）：

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
    function initialize() {
        var mapCanvas = document.getElementById('map');
        var mapOptions = {
          center: new google.maps.LatLng('lat', 'lng'),
          zoom: 20,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

由于我在display:none div上创建地图，我还在页面中使用google.maps.event.trigger(map, 'resize');来修复“左上角”错误。请注意，我的问题与此无关，但我读到错位可能是由调整大小的解决方案造成的，因此我认为它可能是相关的。

考虑到我试图引用一个非常小的区域，地图位于中心非常重要。我应该在哪里放置map.getCenter()或者是否有更好的解决方案来解决这个问题？

我感谢所提供的任何意见。

Answer 1

你的纬度和长值是多少小数？如果缩小会增加差异，我认为你需要更精确的浮点值（我经常使用7位小数，这是地理编码API提供的。）

Answer 2

以下示例演示如何在调整地图大小时保留原始中心，在触发idle事件时设置地图中心。

示例

function initialize() { var centerLatLng = new google.maps.LatLng(60.169621, 24.952265); var map = new google.maps.Map(document.getElementById('map'), { center: centerLatLng, zoom: 19 }); google.maps.event.addListener(map,'idle',function(event) { map.setCenter(centerLatLng); //force to set original center position }); } google.maps.event.addDomListener(window, 'load', initialize);

html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; }

<script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map" ></div>

谷歌地图的结果偏离中心

2 个答案: