[英]Google map marker click function issue
I am building an interactive map with google. 我正在与Google建立互动式地图。 I will have a lot of map markers that when clicked will open a bootstrap modal with content relative to that location.
我将有很多地图标记,当单击它们时,它们将打开一个包含与该位置有关的内容的引导程序模态。 Is it possible to just have 1 modal call in the script, then load it with the content relative to the marker clicked?
是否可以在脚本中仅进行1个模态调用,然后将其相对于单击的标记的内容加载? I was thinking I could write a remote html file with all of the different modal contents.
我当时想我可以写一个包含所有不同模式内容的远程html文件。 But right now, I have to write a click function for each marker (painstaking), to open a unique modal.
但是现在,我必须为每个标记(痛苦)编写一个click函数,以打开唯一的模态。
1 modal, 1 click function relative to the marker clicked, unique modal contents loaded depending on marker clicked. 相对于单击的标记有1个模态,1个单击功能,根据单击的标记会加载唯一的模态内容。 Can this be done?
能做到吗?
function initialize() {
var map;
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(43.819201,-79.535474),
disableUi: true
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var commerciallocations = [
['Regan',43.703264,-79.804144],
['Lake',43.897239,-78.6594789],
['Rowe',43.72277,-80.378554],
['Westport',43.649826,-79.6599653],
['Vinefresh',42.9556009,-81.6699305]
];
var marker2, i;
for (i = 0; i < commerciallocations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(commerciallocations[i][1], commerciallocations[i][2]),
map: map,
icon:'images/commercialmapicon.png'
});
if (i == [0]){
google.maps.event.addListener(marker, 'click', function() {
$('#modal0').modal();
});
}
if (i == [1]){
google.maps.event.addListener(marker, 'click', function() {
$('#modal1').modal();
});
}
if (i == [2]){
google.maps.event.addListener(marker, 'click', function() {
$('#modal2').modal();
});
}
if (i == [3]){
google.maps.event.addListener(marker, 'click', function() {
$('#modal3').modal();
});
}
if (i == [4]){
google.maps.event.addListener(marker, 'click', function() {
$('#modal4').modal();
});
}
};
I added the portion of the script I'm having to write in order to tell each marker to open its respective modal. 我添加了我必须编写的脚本部分,以告诉每个标记打开其各自的模式。 See how I have to write a click event for each index of the array.
了解如何为数组的每个索引编写click事件。 I don't know any other way...
我什么都不知道
try with put the marker in an array and then in the addListerner function pass the array item and the index for generate a sequential call to modal like : 尝试将标记放入数组中,然后在addListerner函数中传递数组项和索引,以生成对模式的顺序调用,例如:
var arrayForModal = [];
for (i = 0; i < commerciallocations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(commerciallocations[i][1], commerciallocations[i][2]),
map: map,
icon:'images/commercialmapicon.png'
k = arrayForModal.push(marker);
addListenersOnPolygon(arrayForModal[k-1], 'click', function(k) { $(('#modal' + (k-1)).modal)});
});
Thanks for your help guys. 感谢您的帮助。 It definitely helped my train of thought, I deconstructed a few other functions I discovered on SO and I managed to write the click function properly.
它无疑帮助了我的思路,我解构了在SO上发现的其他一些功能,并设法正确编写了click函数。
I added the ID of each Modal into the index of each location in the array (attached the id to the marker). 我将每个模态的ID添加到数组中每个位置的索引中(将ID附加到标记上)。 I then created a variable to identify the index value.
然后,我创建了一个变量来标识索引值。 Then I simply called the index with the ID value depending on which marker was clicked within the for loop.
然后,我简单地使用ID值调用索引,该ID值取决于在for循环中单击了哪个标记。
var commerciallocations = [
['Regan',43.703264,-79.804144,'#modal0'],
['Lake',43.897239,-78.6594789, '#modal1'],
['Rowe',43.72277,-80.378554, '#modal2'],
['Westport',43.649826,-79.6599653, '#modal3'],
['Vinefresh',42.9556009,-81.6699305, '#modal4'],
['Winery', 42.1209449,-82.9707676, '#modal5']
];
var markers =[];
for (var i = 0; i < commerciallocations.length; i++) {
var place = commerciallocations[i];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(commerciallocations[i][1], commerciallocations[i][2]),
map: map,
icon:'images/commercialmapicon.png',
title: place[0],
popup: place[3]
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
$(this.popup).modal();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.