Javascript 谷歌地图api上附加到单个标记的唯一信息框

我正试图为我的网站编写一个功能，允许用户点击谷歌地图，一个标记就会出现。当标记出现时，用户将单击所述标记并能够填写一些信息。我有这个工作

但是，当用户单击另一个标记进行编辑时，上一个标记的窗口将不再打开。我如何编辑一个信息窗口，保存它，然后编辑另一个信息窗口，并能够在任何时候点击打开信息窗口

以下是我的JS代码：

function initialize() {
  var latlng = new google.maps.LatLng(54.5, -7.0);
  var options = {
    zoom: 7,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map"), options);
  var html = "<table>" +
    "<tr><td>Country:</td> <td><input type='text' id='country'/> </td> </tr>" +
    "<tr><td>City:</td> <td><input type='text' id='city'/></td> </tr>" +
    "<tr><td>Duration:</td> <td><input type='text' id='duration'/></td> </tr>" +
    "<tr><td>Category:</td> <td><select id='category'>" +
    "<option value='city' SELECTED>City Break</option>" +
    "<option value='beach'>Beach Holiday</option>" +
    "<option value='romantic'>Romantic Holiday</option>" +
    "<option value='activity'>Activity Holiday</option>" +
    "<option value='site'>Site Seeing</option>" +
    "</select> </td></tr>" +
    "<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";
  infowindow = new google.maps.InfoWindow({
    content: html
  });

  google.maps.event.addListener(map, "click", function(event) {
    marker = new google.maps.Marker({
      position: event.latLng,
      map: map
    });
    infowindow.setContent(html);
    google.maps.event.addListener(marker, "click", function() {
      infowindow.open(map, marker);
    });
  });
}

function saveData() {
  var country = escape(document.getElementById("country").value);
  var duration = escape(document.getElementById("duration").value);
  var category = document.getElementById("category").value;
  var latlng = marker.getPosition();

  var url = "phpsqlinfo_addrow.php?country=" + country + "&city" + city + "&duration=" + duration +
    "&category=" + category + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
  downloadUrl(url, function(data, responseCode) {
    if (responseCode == 200 && data.length >= 1) {
      infowindow.close();
      document.getElementById("message").innerHTML = "Location added.";
    }
  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
    new ActiveXObject('Microsoft.XMLHTTP') :
    new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request.responseText, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}

函数初始化（）{
var-latlng=新的google.maps.latlng（54.5，-7.0）；
变量选项={
缩放：7，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“map”），选项）；
var html=“”+
“国家：”+
“城市：”+
“持续时间：”+
“类别：”+
“城市断裂”+
“海滩假日”+
“浪漫假日”+
“活动假期”+
“网站浏览”+
" " +
"";
infowindow=新建google.maps.infowindow({
内容：html
});
google.maps.event.addListener（映射，“单击”，函数（事件）{
marker=新的google.maps.marker({
位置：event.latLng，
地图：地图
});
setContent（html）；
google.maps.event.addListener（标记“单击”，函数（）{
信息窗口。打开（地图、标记）；
});
});
}
函数saveData（）{
var country=escape（document.getElementById（“country”）.value）；
var duration=escape（document.getElementById（“duration”）.value）；
var category=document.getElementById（“category”）.value；
var latlng=marker.getPosition（）；
var url=“phpsqlinfo_addrow.php？country=“+country+”&city“+city+”&duration=“+duration+
“&category=“+category+”&lat=“+latlng.lat（）+”&lng=“+latlng.lng（）”；
下载url（url、函数（数据、响应代码）{
if（responseCode==200&&data.length>=1）{
infowindow.close（）；
document.getElementById（“消息”）.innerHTML=“位置已添加。”；
}
});
}
函数下载url（url，回调）{
var请求=window.ActiveXObject？
新的ActiveXObject（'Microsoft.XMLHTTP'）：
新的XMLHttpRequest；
request.onreadystatechange=函数（）{
if（request.readyState==4）{
request.onreadystatechange=doNothing；
回调（request.responseText、request.status）；
}
};
打开（'GET'，url，true）；
请求发送（空）；
}
函数doNothing（）{}

您应该将infowindow的初始化放在addListener中，并为marker和infowindow创建一个局部变量

google.maps.event.addListener(map, "click", function(event) {
    var marker = new google.maps.Marker({
          position: event.latLng,
          map: map
        });

    var infowindow = new google.maps.InfoWindow({
        content: html
    });

    infowindow.setContent(html);

    google.maps.event.addListener(marker, "click", function() {
          infowindow.open(map, marker);
        });
    });
}

---

为什么需要这样做？这样每个marker和infowindow都有自己的实例，而不是替换现有的实例。试试看，我已经测试过代码了。非常感谢，效果不错。但是现在保存和关闭不起作用了吗？关于为什么要定义它，@gRenzFries说应该定义它，而您正在另一个函数中使用它，有什么想法吗。所以这不是一个解决方案。在初始化函数之外定义

var infowindow

。按照他建议的方式，将为每个标记创建一个infowindow对象，这不是您通常想要做的+infowindow对象在您的

saveData

函数中将不可用。@MrUpsidown它根据她的注释工作。只有她可以验证该问题。请尝试在全局范围内声明infowindow变量，在这种情况下，该变量将在initialize/saveData函数之外。Ie:

var信息窗口您可以将这一行放在初始化函数上方。试试看，让我知道。我不太确定我该怎么写。对不起，我刚刚开始编写这种语言，我不确定如何管理它，你能帮我吗？如果你定义一个变量，比如说
var a=1
在名为
myFunction（）
的函数中，您将无法在另一个函数中使用它（除非您将其作为参数传递）。因为该变量的范围是局部的，而不是全局的。看见