地理編碼器會自動將谷歌地圖移動到左側

Question

我正在創建一個頁面，其中標記固定在地圖的中心，即使用戶平移/縮放地圖。當用戶點擊標記時，它會顯示標記的完整地址。

問題是，當我提供results[0].formatted_address時，infoWindow.setContent()顯示了一個字符串，但它將地圖顯示在左側（並且不顯示infoWindow）。

下面的代碼是我擁有的反向地理編碼。警報功能（我已取消註釋）正確顯示地址。

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。

修改後的代碼：

  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>