使用Google Maps V3的多条折线和infowindows [英] Multiple polylines and infowindows with Google Maps V3

问题描述

我有一个带有多条多段线的地图，并且希望在点击该行时打开一条线特定的infowindow。

I have a map with multiple polylines and would like to open a line-specific-infowindow when clicking the line.

到目前为止，我的代码只显示最后一次迭代。

So far my code only shows the content of the last iteration.

我发现了两个非常好的例子，但是经过几个小时的尝试，我仍然没有进一步的了。

例子1： http://srsz750.appspot.com/api3/polylines-multiple.html

示例2： http://www.geocodezip.com/v3_GenericMapBrowser.asp ？文件名= flights090414.xml

I found two very nice examples of what I want but after hours of trying I am still no further.
Example 1: http://srsz750.appspot.com/api3/polylines-multiple.html
Example 2: http://www.geocodezip.com/v3_GenericMapBrowser.asp?filename=flights090414.xml

所以你是我的最后一个镜头：-S

So your are my last shot :-S

是我的代码，只显示了最后一次迭代的内容：

Here is my code that shows only the content of the last iteration:

for (var i = 0; i < locations.length; i++) {
var route = locations[i]; // locations is an array of route-arrays.   
 //route is an array with details. route[0] contains the description.

var imageStart = 'img/rijder.png';   
var polyOptions = {
     strokeColor: '#0000FF',
         strokeOpacity: 1.0,
     strokeWeight: 3
    }       

  poly = new google.maps.Polyline(polyOptions, info);   
  var path = poly.getPath(); 

 //line text

 var info = route[0]; 
 google.maps.event.addListener(poly, 'click', function(event) {
    infowindow.setContent(info);
    infowindow.position = event.latLng;
infowindow.open(map);
    }); 

//startmarker   
var startLatLng = new google.maps.LatLng(route[1], route[2]);
var smarker = new google.maps.Marker({
    position: startLatLng,
    map: map,
    icon: imageStart,
    title: route[7],
    html: route[0]     
});
path.push(startLatLng);
//starttext

 google.maps.event.addListener(smarker, "click", function () {
        infowindow.setContent(this.html);
        infowindow.open(map, this);
        }); 

 //endmarker
var endLatLng = new google.maps.LatLng(route[4], route[5]);
var emarker = new google.maps.Marker({
    position: endLatLng,
    map: map,
    icon: imageEnd,
    title: route[8],
    html: route[3]     
});
path.push(endLatLng);
//endtext

 google.maps.event.addListener(emarker, "click", function () {
            infowindow.setContent(this.html);
            infowindow.open(map, this);
        });
//close line and put on the map
poly.setMap(map); 
 } 
}

这里是我期望能够工作的代码，但

And here is the code I would expect to work but all lines disappeared (only the relevant code, I also added a mouseover function):

  //line text
     google.maps.event.addListener(poly, 'click', (function(event,index){
     return function(){
    var routeinfw = locations[index];
    var inf =  routeinfw[0]; 
    infowindow.setContent(inf);
    infowindow.position = mouselocation;
    infowindow.open(map);
      };
    })(event,i));

//starticon

推荐答案

就像在你发布的例子中一样，创建一个函数来创建点击事件监听器，并从位置循环中调用它：

Just like in the example you posted, create a function to create the click events listeners and call it from inside the locations loop:

function createInfoWindow(poly,content) {
    google.maps.event.addListener(poly, 'click', function(event) {
        infowindow.content = content;
        infowindow.position = event.latLng;
        infowindow.open(map);
    });
}

您可以在循环结束时调用它：

And you can call this at the end of the loop:

createInfoWindow(poly,info);

这篇关于使用Google Maps V3的多条折线和infowindows的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！