谷歌地图标记点击功能问题答案

【问题标题】：Google map marker click function issue谷歌地图标记点击功能问题
【发布时间】：2015-07-27 09:13:13
【问题描述】：

我正在使用 google 构建交互式地图。我将有很多地图标记，单击这些标记将打开一个引导模式，其中包含与该位置相关的内容。是否可以在脚本中只使用 1 个模态调用，然后使用与单击的标记相关的内容加载它？我在想我可以编写一个包含所有不同模式内容的远程 html 文件。但是现在，我必须为每个标记编写一个点击函数（费力），以打开一个独特的模态。

1 modal, 1 click 功能相对于被点击的标记，根据被点击的标记加载独特的模态内容。这个可以吗？

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

    };

我添加了我必须编写的脚本部分，以便告诉每个标记打开其各自的模式。看看我如何为数组的每个索引编写一个点击事件。我不知道还有什么办法……

【问题讨论】：

实际上，您似乎可以使用 for 循环，因为每个标记都附加了一个模式。只需将它们按正确的顺序放置，您只需在 for 循环中执行一次 modal() 调用。没有？
我不确定你的意思。每个标记都需要在模态中具有唯一的内容 - 因此我必须创建 modal1,modal2...
我不明白为什么你有这么多 if 语句。为什么你不能这样做： google.maps.event.addListener(marker, 'click', function() { $('#modal'+i).modal(); }); ?
我在 jS/jquery 方面没有受过很好的教育。我尝试了您的建议，并将其添加到 for 循环中。但它不会调用打开模式。虽然没有错误。如果我理解正确，您提供的单击功能应该循环遍历数组的索引并应用模态（假设模态是有序的）。它只是不启动模式。

标签： javascript jquery twitter-bootstrap google-maps google-maps-api-3

【解决方案1】：

尝试将标记放入数组中，然后在 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)});
});

【讨论】：

【解决方案2】：

感谢你们的帮助。它确实帮助了我的思路，我解构了我在 SO 上发现的其他一些函数，并且我设法正确编写了 click 函数。

我将每个 Modal 的 ID 添加到数组中每个位置的索引中（将 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();
        });

【讨论】：