将点击功能添加到信息窗口中的按钮

Question

我需要帮助才能使onclick功能在我的InfoWindow内容中工作。

这是我代码的一部分：

for (i = 0; i < markers.length; i++) {
var position = new google.maps.LatLng(markers[i][0], markers[i][1]);
var icon = {
url:"http:///".concat(markers[i][3]),
scaledSize: new google.maps.Size(20, 20), // scaled size
origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(0, 0)
};
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][4].toString().concat(' ').concat(markers[i][5].toString()),
icon: icon, 
url:'im:<sip:'+markers[i][6]+'>'
});
var infowindow = new google.maps.InfoWindow({
content: ''
});
marker.addListener('mouseover', function() { 
infowindow.setContent('<p><label>Name:</label> '+this.title+'</p>' +
'<center><button class="btn btn-primary" n
onclick="myFunction(){ window.location.assign(this.url);}">Call</button></center>'); 
infowindow.open(map, this);
});
}

Answer 1

在您的 onclick 处理程序函数中，这将引用按钮元素而不是标记对象，这就是为什么它不起作用的原因，因为按钮不是像 url 这样的任何属性。

您可以使用带有 href 的标记重定向到您想要的位置

试试这个：

for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][0], markers[i][1]);
var icon = {url:"http:///".concat(markers[i][3]),
scaledSize: new google.maps.Size(20, 20), // scaled size
origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(0, 0) };
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][4].toString().concat(' ').concat(markers[i][5].toString()),
icon: icon, 
url:'im:<sip:'+markers[i][6]+'>'
});
var infowindow = new google.maps.InfoWindow({
content: ''
});
marker.addListener('mouseover', function() { 
infowindow.setContent('<p><label>Name:</label> '+this.title+'</p>' +
'<center><a class="btn btn-primary" href="'+this.url+'">Call</a></center>'); 
infowindow.open(map, this);
});

Answer 2

onclick处理程序实际上并不执行任何内容。您只需在其中定义一个函数。试试这个：

for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][0], markers[i][1]);
var icon = {url:"http:///".concat(markers[i][3]),
scaledSize: new google.maps.Size(20, 20), // scaled size
origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(0, 0) };
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][4].toString().concat(' ').concat(markers[i][5].toString()),
icon: icon, 
url:'im:<sip:'+markers[i][6]+'>'
});
var infowindow = new google.maps.InfoWindow({
content: ''
});
marker.addListener('mouseover', function() { 
infowindow.setContent('<p><label>Name:</label> '+this.title+'</p>' +
'<center><button class="btn btn-primary" n
onclick="window.location.assign(' + this.url + ');">Call</button></center>'); 
infowindow.open(map, this);
});