Question

我试图显示一个地图，其中包含多条铺设为折线的路线。单击折线时，我想显示特定于该线的数据。将数据与线关联不是问题，但无论点击哪条线，显示的数据都与最近绘制的线相关联，就像每条新折线覆盖最后一条线一样。我有一个数据库，其中包含指向gpx文件的链接，指向视频的链接，路由类型（指示颜色）以及其他一些内容。通过解析gpx文件并将google maps 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>';
         });
}

我无法找到任何解决方案，并且已经停留了一段时间。它使用标记和绑定信息窗口工作正常，但我需要能够点击该行。任何帮助都表示赞赏！

Answer 1

你有一个拼写错误（"函数的“src”中缺少playVideo。

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

Google Maps Javascript v3折线点击活动

1 个答案: