谷歌地图Javascript v3多段线点击事件
Google Maps Javascript v3 Polyline click event
我正在尝试显示一张地图,其中包含多条多段线。单击多段线时,我希望显示特定于该线的数据。将数据与直线关联不是问题,但无论单击哪条直线,显示的数据都会与最近绘制的直线关联,就好像每条新的多段线都会覆盖最后一条一样。我有一个数据库,其中包含指向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>';
});
}
概念验证小提琴
相关文章:
- 按钮字段确认点击不'不起作用
- 使用复选框绘制多段线谷歌地图API3,不'不起作用
- 如何将超链接添加到通过传单创建的传单多段线.Draw
- 如何在Maps API v3.中更改多段线的路径
- watchPosition与多段线组合
- 谷歌地图Javascript v3多段线点击事件
- Javascript或Jquery获取事件任意按钮点击
- 在谷歌地图上为每个“多边形”生成新的多段线;日期“;来自mysql的值
- 谷歌地图API多段线创建失败;未捕获类型错误:数字不是函数;
- 谷歌地图的多段线边界
- 谷歌地图API-在从ajax页面加载新数据之前清除标记、多段线
- GMapv3+同时显示所有标记+多段线
- 需要帮助,为谷歌地图多段线构建阵列
- 设置标记之间多段线的动画-Mapbox
- 如何将多段线添加到标记阵列中
- 谷歌地图V3删除多段线覆盖
- 在传单中,介绍如何在多个点之间绘制多段线
- 谷歌地图多段线点击检测线号
- 在Google Maps API V3中连接每个点的可编辑多段线
- 如何在jQuery中获取输入文本字段的点击事件