Question

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

试图完成这个我遇到了一个问题，到目前为止还没有找到解决方案。当我第一次点击地图时，会创建第一个标记。然后，当我尝试点击该标记时，没有任何内容出现。然后在第二次单击时出现第二个标记，如果我单击第二个标记，则应在第一个标记处显示的地址出现在第二个标记上，依此类推。所以标记地址在某种程度上被取代了，无法弄清楚问题是什么。

我一直在寻找一个问题，但无法确定导致这种奇怪行为的原因。我是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

问题是地理编码器是异步的，所以locationAddress在你添加了infowindow和未定义的内容后得到了它的价值。

必须从地理编码器的回调函数内部调用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);
      });
    }
  }

Google地图的JavaScript问题

1 个答案: