Question

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

注意：这是我整个代码的一部分，这就是为什么＆＃34; infobulle＆＃34;似乎没有被宣布。以同样的方式，＆＃34; this.jsonActivity＆＃34;和＆＃34; mapView＆＃34;在这部分代码之前正确初始化。

在这里，＆＃34; newActivity＆＃34; in参数是谷歌地图API中的标记，我尝试做的是在点击它时在当前标记旁边显示一个InfoWindow。一切都还可以，整个文本都在InfoWindow中正确显示，但问题是我无法调用＆＃34; alertMessage（）＆＃34;当我点击按钮时，没有任何反应......我真的不知道为什么!!

嗯，这是我的代码，谢谢你的帮助:)。

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");
    }
});

修改

这很完美，现在正在工作！

我已经尝试过你所有的解决方案，只有一个解决方案正在为我工作，这个解决方案是全局的，感谢Dr.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建议的解决方案。就像之前一样，当我点击按钮时，除了按钮之外，一切都正确显示，没有任何反应。

对于亚历山大建议的解决方案：

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);
};

它不再工作了，你知道如何解决这个问题吗？

Answer 1

使该功能全局可访问（目前它不是）：

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

Answer 2

而不是

"<button onclick='blah'>"

你需要

"<button id='myAlertButton'>"

然后在infoWindow添加到DOM

之后的eventListener回调中

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

Answer 3

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,
});

on Info InfoWindow内容

3 个答案: