javascript - Google map Javascript v3 折线点击事件

Question

我正在尝试显示一张 map ，其中有多条路线布置为折线。单击多段线时，我想显示特定于该线的数据。将数据与线关联不是问题，但无论单击哪条线，显示的数据都会与最近绘制的线关联，就好像每条新折线都会覆盖最后一条线一样。我有一个数据库，其中包含 gpx 文件的链接、视频的链接、路线类型(指示颜色)和其他一些内容。该线是通过解析 gpx 文件并将谷歌地图 latlng 变量插入数组来绘制的:

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

点击事件函数基本如下:

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

我找不到任何解决方案，并且已经卡住了一段时间。使用标记并将信息窗口绑定(bind)到它们可以很好地工作，但我需要能够单击该行。如有任何帮助，我们将不胜感激!

Answer 1

您有一个拼写错误(playVideo 函数的“src”中缺少 ")。

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

应该是:

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