Question

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

问题在于infoWindow.setContent()在我提供字符串时会显示一个字符串，但在我提供infoWindow时将地图向左平移（并且不会显示results[0].formatted_address）。

以下代码是我的反向地理编码。警报功能（我已取消注释）正确显示地址。

  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）。您必须将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>

Geocoder会自动将Google地图平移到左侧

1 个答案: