谷歌地圖無限遞歸

Question

我有一個輸入字段，用戶輸入地址。谷歌地圖API自動完成它，並隨後重新定位地圖標記，並應該將地圖移動到該位置。

var map_location = new google.maps.LatLng(45.815015, 15.981912); 
var marker; 
var map; 
var autocomplete; 

function initialize() { 
    var mapOptions = { 
     zoom: 13, 
     center: map_location 
    }; 

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    marker = new google.maps.Marker({ 
     map: map, 
     draggable: true, 
     position: map_location 
    }); 

    google.maps.event.addListener(marker, 'dragend', function (event) { 
     document.getElementById("lat_hidden").value = this.getPosition().lat(); 
     document.getElementById("long_hidden").value = this.getPosition().lng(); 
    }); 

    autocomplete = new google.maps.places.Autocomplete(
     document.getElementById('autocomplete'), 
     {types: ['geocode']}); 

    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     map_location = new google.maps.LatLng(
      parseFloat(document.getElementById("lat_hidden").value), 
      parseFloat(document.getElementById("long_hidden").value) 
     ); 
     marker.setPosition(map_location); 
     map.panTo(map_location); 
    }); 
} 

最後一行代碼導致無限遞歸。我也試過.setCenter。 Firefox跟蹤遞歸到maps.gstatic.com腳本，該腳本不斷調用它自己的兩個函數。

什麼是導致這個問題，我該如何解決它？

Answer 1

您不在place_changed事件上設置lat_hidden和long_hidden字段。所以這段代碼不會創建一個有效的google.maps.LatLng()：

map_location = new google.maps.LatLng(
     parseFloat(document.getElementById("lat_hidden").value), 
     parseFloat(document.getElementById("long_hidden").value) 
    ); 

工作代碼片段：

var map_location = new google.maps.LatLng(45.815015, 15.981912); 
 
var marker; 
 
var map; 
 
var autocomplete; 
 

 
function initialize() { 
 
    var mapOptions = { 
 
    zoom: 13, 
 
    center: map_location 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 

 
    marker = new google.maps.Marker({ 
 
    map: map, 
 
    draggable: true, 
 
    position: map_location 
 
    }); 
 

 
    google.maps.event.addListener(marker, 'dragend', function(event) { 
 
    document.getElementById("lat_hidden").value = this.getPosition().lat(); 
 
    document.getElementById("long_hidden").value = this.getPosition().lng(); 
 
    }); 
 

 
    autocomplete = new google.maps.places.Autocomplete(
 
    document.getElementById('autocomplete'), { 
 
     types: ['geocode'] 
 
    }); 
 

 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
 
    document.getElementById("lat_hidden").value = autocomplete.getPlace().geometry.location.lat(); 
 
    document.getElementById("long_hidden").value = autocomplete.getPlace().geometry.location.lng(); 
 
    map_location = new google.maps.LatLng(
 
     parseFloat(document.getElementById("lat_hidden").value), 
 
     parseFloat(document.getElementById("long_hidden").value) 
 
    ); 
 
    marker.setPosition(map_location); 
 
    map.panTo(map_location); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map-canvas { 
 
    height: 500px; 
 
    width: 500px; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script> 
 
<div id="map-canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div> 
 
<input id="lat_hidden" /> 
 
<input id="long_hidden" /> 
 
<input id="autocomplete" />