Google Maps Javascript v3折线点击事件

问题描述

我正在尝试显示一条地图，其中包含许多以多义线形式布置的路线.单击折线后，我要显示特定于该线的数据.将数据与行关联不是问题，但是无论单击哪条线，显示的数据都与绘制的最新线相关联，就好像每条新的折线都将覆盖最后一条折线一样.我有一个数据库，其中包含指向gpx文件的链接，指向视频的链接，路线类型(指示颜色)和其他一些东西.通过解析gpx文件并将google maps latlng变量推入数组来绘制线条:

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

click事件函数基本上如下:

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!

推荐答案

您有错字(在 playVideo 函数的"src"中缺少" )./p>

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

应该是:

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

概念证明小提琴

这篇关于Google Maps Javascript v3折线点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！