Geocoder正在自动向左平移谷歌地图

Question

我正在创建一个带有标记的页面，即使用户平移/缩放地图，该标记也会固定在地图的中心。当用户点击标记时，它会显示标记的完整地址。

问题是，当我提供一个字符串时，infoWindow.setContent()会显示一个字符串，但当我提供results[0].formatted_address时，会向左平移映射（而不显示infoWindow）。

下面的代码是我使用的反向地理编码。alert函数（我已经取消了注释）正确地显示了地址。

  var geocoder = new google.maps.Geocoder();
        geocoder.geocode({'latLng': input}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[0]) {
                    //alert(results[0].formatted_address);
                    infoWindow.setContent(results[0].formatted_address);
                    infoWindow.open(map,marker);
               } else {
                    alert('No results found');
              }
            } else {
                  alert('Geocoder failed due to: ' + status);
            }
      });

我完整的Javascript代码是：

    var map;
    var marker;
    var infoWindow = new google.maps.InfoWindow();
    function initialize() {
        function setUpMap(){
            var mapOptions = {
                 zoom: 14,
                 center: new google.maps.LatLng(22.519422, 88.35741400000006),
                 mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
            google.maps.event.addListener(map, 'center_changed', function() {
                 removeMarker();
            });
            google.maps.event.addListener(map, 'idle', function() {
                setMarker();
            });
        }
        function removeMarker(){
             marker.setMap(null);
        }
        function setMarker(){
             marker = new google.maps.Marker({
                  position: map.getCenter(),
                  map: map,
                  title:"Hello World!"
             });
             google.maps.event.addListener(marker, 'click', function() {
                  var input = marker.getPosition();
                  var geocoder = new google.maps.Geocoder();
                  geocoder.geocode({'latLng': input}, function(results, status) {
                       if (status == google.maps.GeocoderStatus.OK) {
                           if (results[0]) {
                                //alert(results[0].formatted_address);
                                infoWindow.setContent(results[0].formatted_address);
                                infoWindow.open(map,marker);
                           } else {
                                alert('No results found');
                           }
                       } else {
                           alert('Geocoder failed due to: ' + status);
                       }
                  });
             });
        }
       setUpMap();
 }
 google.maps.event.addDomListener(window, 'load', initialize);

我认为问题在于，当用户点击标记时，会以某种方式调用setMarker()。我真的不知道问题出在哪里。有人能帮我找到它吗？

Answer 1

它是由center_changed处理程序和infoWindow的autoPan之间的交互强制执行的。

当您打开infoWindow时，API默认情况下会尝试平移地图，以便能够在最佳位置显示infoWindow。但当这种情况发生时，地图的中心会发生变化，标记会被删除（这就是为什么你看不到信息窗口的原因）。您必须将infoWindow的disableAutoPan-选项设置为true。

修改代码：

          function initialize() {
            function setUpMap() {
              var mapOptions = {
                  zoom: 14,
                  center: new google.maps.LatLng(22.519422, 88.35741400000006),
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                },
                map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions),
                infoWindow = new google.maps.InfoWindow({
                  disableAutoPan: true
                }),
                marker = setMarker(map, infoWindow);
              google.maps.event.addListener(map, 'center_changed', function() {
                infoWindow.close();
                marker.setPosition(this.getCenter());
              });
            }
            function setMarker(map, infoWindow) {
              var marker = new google.maps.Marker({
                position: map.getCenter(),
                map: map,
                title: "Hello World!"
              });
              google.maps.event.addListener(marker, 'click', function() {
                var input = marker.getPosition();
                var geocoder = new google.maps.Geocoder();
                geocoder.geocode({
                  'latLng': input
                }, function(results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {
                    console.log(results)
                    if (results[0]) {
                      console.log(results[0].formatted_address)
                        //alert(results[0].formatted_address);
                      infoWindow.setOptions({
                        content: '<div style="xwidth:200px">' + results[0].formatted_address + '</div>'
                      });
                      infoWindow.open(map, marker);
                    } else {
                      alert('No results found');
                    }
                  } else {
                    alert('Geocoder failed due to: ' + status);
                  }
                });
              });
              return marker;
            }
            setUpMap();
          }
          google.maps.event.addDomListener(window, 'load', initialize);

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

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_canvas"></div>