google 地图的无限递归

Question

我有一个输入字段，用户可以在其中输入地址。 Google 地图 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" />

google 地图的无限递归

infinite recursion with google maps

javascript

recursion

google-maps

google-maps-api-3