Google Maps Javascript v3 Polyline click event

问题

I'm trying to make display a map with a number of routes laid out as polylines. When a polyline is clicked I want to display data specific to that line. Associating data with a line isn't a problem, but no matter which line is clicked the data displayed is associated with the most recent line drawn, as if each new polyline overwrites the last. I have a database which contains a link to a gpx file, a link to a video, type of route (which indicates the colour) and some other stuff. The line is drawn by parsing the gpx file and pushing the google maps latlng variables into an array:

                          var p = new google.maps.LatLng(lat, lng); 
                          points.push(p);     
                    }
                    var poly = new google.maps.Polyline({
                          // style here
                              path: points,
                              strokeColor: "Random Colour", //seems to save over the previous colour for each line
                              strokeOpacity: .5,
                              strokeWeight: 4
                        });
                    playVideo(poly, video, map); // Click event function.
                    poly.setMap(map);
             });

The click event function is basically as follows:

function playVideo(poly, video, map){
    google.maps.event.addListener(poly, 'click', function(h) {

             document.getElementById('play').innerHTML = '<iframe width="640" height="360"' + ' src='+ video + '" frameborder="0" allowfullscreen></iframe>';
         });
}

I can't find any solution to this, and have been stuck for a while. It works fine using markers and binding info windows to them, but I need to be able to click on the line. Any help at all is appreciated!

回答1:

You have a typo (missing " in the "src" of the playVideo function).

function playVideo(poly, video, map){
  google.maps.event.addListener(poly, 'click', function(h) {
         document.getElementById('play').innerHTML = '<iframe width="640" height="360"' + ' src='+ video + '" frameborder="0" allowfullscreen></iframe>';
  });
}

Should be:

function playVideo(poly, video, map){
  google.maps.event.addListener(poly, 'click', function(h) {
         document.getElementById('play').innerHTML = '<iframe width="640" height="360"' + ' src="'+ video + '" frameborder="0" allowfullscreen></iframe>';
  });
}

proof of concept fiddle

来源：https://stackoverflow.com/questions/29182835/google-maps-javascript-v3-polyline-click-event