Google map 的 JavaScript 问题

Question

我尝试创建一个应用程序，该应用程序可以在用户单击时在 map 上创建标记。然后，如果用户单击标记，则应显示地址。

在尝试完成此任务时，我遇到了问题，但到目前为止尚未找到解决方案。当我第一次单击 map 时，会创建第一个标记。然后，当我尝试单击该标记时，什么也没有出现。然后，在第二次单击时，会出现第二个标记，如果我单击第二个标记，则应在第一个标记处显示的地址会出现在第二个标记上，依此类推。因此标记地址不知何故发生了移位，无法找出问题所在。

我一直在寻找问题，但无法确定导致这种奇怪行为的原因。我是 JavaScript 的新手，所以我不知道它是否与异步请求有关，或者我忽略的代码中有一些错误。

代码如下:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">

</script>
<script type="text/javascript">
    var map;
    var counter;
    var latlng;
    var locationAddress;
    var geocoder;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    latlng = new google.maps.LatLng(46.043830, 14.488864);
    var myOptions = {
      zoom: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    counter = 0;

     google.maps.event.addListener(map, 'click', function(event) {
        map.setCenter(event.latlng);
        codeLatLng(event.latLng);
    placeMarker(event.latLng);
  });
  }

  function placeMarker(location) {
  var clickedLocation = new google.maps.LatLng(location);
  latlng = location;
  var marker = new google.maps.Marker({
      position: location, 
      map: map
  });

  addLocationInfo(marker);
}

function addLocationInfo(marker){
    var infoWindow = new google.maps.InfoWindow({content: locationAddress, size: new google.maps.Size(50, 50)});
    google.maps.event.addListener(marker, 'click', function(){
        infoWindow.open(map, marker);
    });
}

function codeLatLng(latlng) {
    if (geocoder) {
      geocoder.geocode({'latLng': latlng}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (results[1]) {
            locationAddress = results[1].formatted_address;
          }
        } else {
          locationAddress = "Neznan naslov";
        }
      });
    }
  }


</script>

如果有人能指出问题的原因或提出更好的解决方案，我将非常感激。

谢谢!

Answer 1

问题在于地理编码器是异步的，因此在添加带有未定义内容的 infowindow 后，locationAddress 会获取其值。

必须从地理编码器的回调函数内部调用addLocationInfo。
以下代码对调用函数的顺序进行了一些细微的更改(为其添加一些参数)以实现此目的。

   var map;
    var counter;
    var latlng;
    var locationAddress;
    var geocoder;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    latlng = new google.maps.LatLng(46.043830, 14.488864);
    var myOptions = {
      zoom: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    counter = 0;

     google.maps.event.addListener(map, 'click', function(event) {
        map.setCenter(event.latlng);
        placeMarker(event.latLng);

  });
  }

  function placeMarker(location) {
  var clickedLocation = new google.maps.LatLng(location);
  latlng = location;
  var marker = new google.maps.Marker({
      position: location, 
      map: map
  });
  codeLatLng(location, marker);
}

function addLocationInfo(marker){
    var infoWindow = new google.maps.InfoWindow({content: locationAddress, size: new google.maps.Size(50, 50)});
    google.maps.event.addListener(marker, 'click', function(){
        infoWindow.open(map, marker);
    });
}

function codeLatLng(latlng, marker) {
    if (geocoder) {
      geocoder.geocode({'latLng': latlng}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (results[1]) {
            locationAddress = results[1].formatted_address;
          }
        } else {
          locationAddress = "Neznan naslov";
        }
        addLocationInfo(marker);
      });
    }
  }