谷歌地图Javascript v3多段线点击事件

Google Maps Javascript v3 Polyline click event

本文关键字:事件 段线点 Javascript v3 谷歌地图      更新时间:2023-09-26

我正在尝试显示一张地图,其中包含多条多段线。单击多段线时,我希望显示特定于该线的数据。将数据与直线关联不是问题,但无论单击哪条直线,显示的数据都会与最近绘制的直线关联,就好像每条新的多段线都会覆盖最后一条一样。我有一个数据库,其中包含指向gpx文件的链接、指向视频的链接、路线类型(指示颜色)和其他一些东西。这条线是通过解析gpx文件并将谷歌地图定位变量推到数组中来绘制的:

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

我找不到任何解决方案,已经被困了一段时间。使用标记并将信息窗口绑定到它们可以很好地工作,但我需要能够点击行。任何帮助都将不胜感激!

您有一个拼写错误(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>';
  });
}

概念验证小提琴