单击InfoWindow内容

onclick in InfoWindow content

本文关键字：内容 InfoWindow 单击      更新时间：2023-09-26

我在代码中遇到了一个小问题，我试图用javascript在InfoWindow的内容中启动一个函数，但我不知道为什么，我很难做到这一点。我在stackoverflow和其他地方看了很多关于它的话题，完全应用了我在这些话题上看到的内容，但。。。

注意：这是我整个代码的一部分，这就是为什么"infobulle"似乎没有被声明的原因。同样，"this.jsonActivity"answers"mapView"也会在这部分代码之前正确初始化。

这里，参数中的"newActivity"是来自谷歌地图API的Marker，我试图做的是当我们点击它时，在当前标记旁边显示一个InfoWindow。一切都很好，整个文本都正确地显示在InfoWindow中，但问题是当我点击按钮时，我无法调用"alertMessage（）"方法，什么也没发生。。。我真的不知道为什么！！

好吧，这是我的代码，谢谢你的帮助：）

google.maps.event.addListener(newActivity, "click", function() {
    if(infobulle)
        infobulle.close();
    var contenu = '<strong>' + this.jsonActivity.title + '</strong><br/>' +
        this.jsonActivity.description + '<br/>' +
        '<h3>Routing:</h3>' +
        '<button onclick="alertMessage()">Click me</button>';
    infobulle = new google.maps.InfoWindow({
        content: contenu,
        maxWidth: 120
    });
    infobulle.open(mapView, this);
    function alertMessage() {
        alert("alertMessage");
    }
});

编辑：

这太完美了，现在开始工作了！

我已经尝试了你们所有的解决方案，只有一个对我有效，那就是宣布函数为全局的解决方案。感谢Molle博士！

现在我把我为另外两个解决方案所做的尝试放在下面：

google.maps.event.addListener(newActivity, "click", function() {
    if(infobulle)
        infobulle.close();
    var contenu = '<strong>' + this.jsonActivity.title + '</strong><br/>' +
        this.jsonActivity.description + '<br/>' +
        '<h3>Routing:</h3>' +
        '<button id="myAlert">Click me</button>';
    infobulle = new google.maps.InfoWindow({
        content: contenu,
        maxWidth: 120
    });
    infobulle.open(mapView, this);
    document.getElementById("myAlert").addEventListener(function() {
        alert("something");
    });
});

对于Jared Smith提出的解决方案。就像以前一样，除了点击按钮外，其他一切都显示正确，什么都没发生。

对于Alexander提出的解决方案：

google.maps.event.addListener(newActivity, "click", function() {
    if(infobulle)
        infobulle.close();
    var contenu = '<strong>' + this.jsonActivity.title + '</strong><br/>' +
        this.jsonActivity.description + '<br/>' +
        '<h3>Routing:</h3>' +
        '<button onclick="(function() {
            alert('"something'");
        })();">Click me</button>';
    infobulle = new google.maps.InfoWindow({
        content: contenu,
        maxWidth: 120
    });
    infobulle.open(mapView, this);
});

这一次，即使是我应该点击按钮的元素也不会出现。。。

对于这两种解决方案，也许我没有正确使用它们。。。所以，如果你想说什么，请继续：）

编辑（2）：好了，现在我有另一个问题：如果我想把一个变量作为函数的参数，我该怎么做？仅仅输入变量的名称作为参数是不起作用的。

我试过：

var contenu = '<strong>' + this.jsonActivity.title + '</strong><br/>' +
    this.jsonActivity.description + '<br/>' +
    '<h3>Routing:</h3>' +
    '<button onclick="alertMessage(''something'')">Click me</button>';
window.alertMessage = function(thing) {
    alert(thing);
};

这是有效的，因为我直接把字符串作为参数。

但如果我申报：

var text = "something";
var contenu = '<strong>' + this.jsonActivity.title + '</strong><br/>' +
    this.jsonActivity.description + '<br/>' +
    '<h3>Routing:</h3>' +
    '<button onclick="alertMessage(text)">Click me</button>';
window.alertMessage = function(thing) {
    alert(thing);
};

它已经不起作用了，你知道怎么解决吗？

使函数全局可访问（目前不可访问）：

window.alertMessage=function() {
    alert("alertMessage");
}

而不是

"<button onclick='blah'>"

你需要

"<button id='myAlertButton'>"

然后在infoWindow添加到DOM 之后的eventListener回调中

document.getElementById('myAlertButton').addEventListener(function(){
    alert('Whatever');
});

InfoWindow接受一个HTMLElement节点作为其content选项。因此，您可以通过JS构建HTML，并添加事件JS land，例如：

// Create Nodes
const ul = document.createElement('ul');
const setOrigin = document.createElement('li');
// Set hierarchy
ul.appendChild(setOrigin);
setOrigin.appendChild(document.createTextNode('Set Origin'));
// Add event listener
setOrigin.addEventListener('click', () => console.log('Set origin and so on…'));
// Set root node as content
const contextMenu = new google.maps.InfoWindow({
    content: ul,
});
相关文章：