单击谷歌地图信息窗口按钮

Google Maps Infowindow Button onclick

本文关键字：窗口 按钮 信息窗 信息 谷歌地图 单击      更新时间：2023-09-26

嘿，伙计们，我想为地图上的每个Marker创建一个带有信息窗口的onclickEvent。在那个信息窗口中应该有一个按钮。如果我点击按钮，应该执行一个带有参数的函数。但这不起作用。。。

我的代码：

var infowindow;
google.maps.event.addListener(marker,"click",function() {
var content="<input type='button' name='Edit' value='Edit' onclick='"+editPreference(preference)+"' id='NearbyEditButton"+counterNearby+"'>"
                                                                + "<input type='button' name='Delete' value='Delete' onclick='deleteMarker('"preference'")' id='NearbyDeleteButton"+counterNearby+"'>"
                                                                + "<br>"
                                                                + "</form>";
infowindow = new google.maps.InfoWindow();  
infowindow.setContent(content);
infowindow.open(map, marker);

这是首选对象

var preference = {
                            type : "NEARBY",
                            marker : marker,
                            position : latLng,
                            dPar : 10,
                            cPar : 10,
                            measureFn : "Euklidische Distanz",
                            label : "Nearby" + counterNearby,
                            id : "nearby" + counterNearby,
                            deleteButton: "NearbyButton"+counterNearby,
                            editButton: "EditButton"+counterNearby
                        };

这是使用首选参数执行的功能

function editPreference(preference) {
alert(preference.type);
deleteFromArray(preferences, preference);
if (!isNaN(document.getElementById("dPar").value)) {
    preference.dPar = document.getElementById("dPar").value;
} else {
    alert("Please enter a number for d-Paramater");
}
if (!isNaN(document.getElementById("cPar").value)) {
    preference.cPar = document.getElementById("cPar").value;
} else {
    alert("Please enter a number for c-Paramater");
}
preference.label = document.getElementById("Lab").value;
var d = document.getElementById("dist");
var d1 = d.options[d.selectedIndex].text;
preference.measureFn = d1;
alert(d1);
preferences.push(preference);

}

您可能想要这样的东西：

google.maps.event.addListener(marker,"click",function() {
  var content="<input type='button' name='Edit' value='Edit' onclick='editPreference("+preference+")' id='NearbyEditButton"+counterNearby+"'>"
                                                                + "<input type='button' name='Delete' value='Delete' onclick='deleteMarker('"preference'")' id='NearbyDeleteButton"+counterNearby+"'>"
                                                                + "<br>"
                                                                + "</form>";
  infowindow = new google.maps.InfoWindow();  
  infowindow.setContent(content);
  infowindow.open(map, marker);
});

但是，如果没有editPreference函数或"首选项"是如何定义和使用的，很难确定。

我也遇到过类似的问题，我的解决方案是使用Javascript的文档API创建内容字符串。使用它，您可以在运行时中添加方法，并且不需要担心作用域。例如，对于以下名为Edit的输入按钮，请使用下面的代码使其成为

// <input type='button' name='Edit' value='Edit' onclick='editPreference("+preference+")' id='NearbyEditButton"
// Creating input element using javascript APIs
   var input = document.createElement('input');
   input.setAttribute('type', 'button');
   input.setAttribute('value','Edit');
   function editPreference(preference){ //your code here }
   google.maps.event.addDomListener(input, "click", editPreference);

在这种情况下，我只是不知道如何将preference对象传递给editPreference函数。

相关文章：