我正在尝试为一组地址设置不同的标记.我想要一个单独的信息窗口.我没有得到信息窗口

I am trying to set different markers to an array of addresses. I want a separate infowindow for each. I am not getting infowindows

本文关键字：信息 窗口 信息窗 一个 单独 组地址 设置 我想要      更新时间：2023-09-26

我正在从PHP调用一个函数（被成功调用），并试图为每个标记设置信息窗口。正在设置标记，但是没有为每个标记设置infowindow。

相同的代码如下。

var markers = [];
var infowin = [];
function addMarker(address, name, contact, id, x) {
  switch(x) {
    case "domestic":
      icon = "grn-blank";
      break;
    case "plumber":
      icon = "purple-blank";
      break;
    case "laundry":
      icon = "orange-blank";
      break;
    case "carpenter":
      icon = "red-blank";
      break;
    case "milk_vendor":
      icon = "ylw-blank";
      break;
    case "electrician":
      icon = "pink-blank";
      break;
    case "newspaper_vendor":
      icon = "blu-blank";
      break;
  }
  var iconbase = "http://maps.google.com/mapfiles/kml/paddle/";
  var icon = icon + ".png";
  var icons = iconbase + icon ;
  geocoder.geocode({'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location,
        animation: google.maps.Animation.DROP,
        icon: new google.maps.MarkerImage(icons)
      });
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
  var contentw = "Name: " + name + "'nAddress: " + address + " 'nPhone: " + contact + "'nId-Number: " + id;
  var infowindow = new google.maps.InfoWindow({
    content: contentw
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });
  markers.push(marker);
  infowin.push(infowindow); 
}

我可以做些什么来避免这个问题？

您的代码中有一个竞赛条件。要理解它，请看下面的精简示例。

function addMarker(...) {
  ...
  geocoder.geocode({'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      // This is where you create the marker (in an asynchronous callback)
      var marker = new google.maps.Marker({ ... });
      ...
    }
  });
  ...
  var infowindow = new google.maps.InfoWindow({ ... });
  // This is where you access the marker (in the surrounding function)
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });
  ...
}

地理编码请求是异步发出的。因此，当回调function(results, status)被执行时，周围的addMarker函数可能已经完成了执行。当您尝试访问marker变量时，竞争条件发生在addMarker的末尾。但是，在执行地理编码回调之前，不会分配此变量的值。

要解决这个问题，您所需要做的就是将信息窗口代码移动到地理编码回调中。

function addMarker(...) {
  ...
  geocoder.geocode({'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var marker = new google.maps.Marker({ ... });
      var infowindow = new google.maps.InfoWindow({ ... });
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
      });
      ...
    }
  });
  ...
}

查看JSFiddle上的一个工作示例。

相关文章：