Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/402.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/84.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 谷歌地图标记点击功能问题_Javascript_Jquery_Twitter Bootstrap_Google Maps_Google Maps Api 3 - Fatal编程技术网

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

Javascript 谷歌地图标记点击功能问题,javascript,jquery,twitter-bootstrap,google-maps,google-maps-api-3,Javascript,Jquery,Twitter Bootstrap,Google Maps,Google Maps Api 3,我正在与谷歌建立一个互动地图。我会有很多地图标记,点击后会打开一个引导模式,其中包含与该位置相关的内容。是否可以在脚本中只调用一个模式调用,然后加载与单击的标记相关的内容?我想我可以用所有不同的模式内容编写一个远程html文件。但现在,我必须为每个标记编写一个单击函数,以打开一个独特的模式 1个模态,1个单击功能,相对于单击的标记,根据单击的标记加载唯一模态内容。这能做到吗 function initialize() { var map; var mapOptions = {

我正在与谷歌建立一个互动地图。我会有很多地图标记,点击后会打开一个引导模式,其中包含与该位置相关的内容。是否可以在脚本中只调用一个模式调用,然后加载与单击的标记相关的内容?我想我可以用所有不同的模式内容编写一个远程html文件。但现在,我必须为每个标记编写一个单击函数,以打开一个独特的模式

1个模态,1个单击功能,相对于单击的标记,根据单击的标记加载唯一模态内容。这能做到吗

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

    };

我添加了脚本中我必须编写的部分,以便告诉每个标记打开其各自的模式。了解如何为数组的每个索引编写单击事件。我不知道其他方法…

尝试将标记放入数组中,然后在addListerner函数中传递数组项和索引以生成对modal的顺序调用,如:

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

谢谢你们的帮助。这无疑帮助了我的思路,我解构了我在SO上发现的其他一些函数,并成功地编写了click函数

我将每个模态的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();
        });

实际上,似乎可以使用for循环,因为每个标记都附加了一个模态。只要将它们按正确的顺序排列,您就只需要在for循环中对它们进行一次模态调用。没有?我不知道你的意思。每个标记都需要在模态中有一个唯一的内容-因此我必须创建modal1,modal2…我不明白为什么你有这么多if语句。为什么你不能这样做:google.maps.event.addListenermarker,'click',function{$'modal'+i.modal;}?我对jS/jquery不是很了解。我尝试了你的建议,我将其添加到for循环中。但它不调用打开模式。但是没有错误。如果我理解正确,您提供的单击函数应该循环遍历数组的索引,并应用模态,前提是模态是有序的。它只是没有启动模态。