谷歌地图# 39;结果偏离中心

Google Maps' result off center

本文关键字：结果 谷歌地图      更新时间：2023-09-26

我正在为一个页面添加地图，但是地图总是偏离给定坐标的中心。一个可能相关的有趣的额外信息是，越远(缩小)，差异越大。我已经在其他线程周围做了一些研究，我发现许多建议使用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:nonediv上创建地图，我也在我的页面中使用google.maps.event.trigger(map, 'resize');来修复"左上角"的错误。请注意，我的问题不是关于这个，但我读到不对齐可能是由调整大小解决方案引起的，因此我认为它可能是相关的。

考虑到我试图引用一个非常小的区域，将地图放在中心是非常重要的。我应该把map.getCenter()放在哪里，或者有更好的解决方案吗?

下面的示例演示了如何在调整地图大小时保留原始中心，在触发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>

你的后位和长位是多少位?如果缩小会增加差异，我认为您需要更精确的浮点值(我经常使用小数点后7位，这是Geocoding API提供的)。

相关文章：