Google地图:可点击的折线图标

Question

我有两个带有折线的标记连接两者.我在标记和折线上点击了事件,但我试图让折线更容易点击而不放置新标记或增加它的strokeWeight.所以我创建了一个圆形图标并放在折线上,但我无法使其可点击.可能吗？

看到这个帖子,但没有给出关于图标如何可点击的任何细节.我搜索了它的代码源,但他添加了一个KML图层.我不想那样做. Google地图:在折线图标上附加活动

搜索了谷歌地图覆盖API,但没有找到任何接口来收听点击事件. https://developers.google.com/maps/documentation/javascript/overlays#Polylines

我还试图附加一个事件监听器,但没有工作.我怀疑如果不添加实际的标记或对象就无法完成,但如果其他人有类似的问题,我会很感激任何提示:)

提前致谢!

我的代码:

var pathSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#228B22'
};

var conPath = new google.maps.Polyline({
    path: conCoord,
        strokeColor: "#228B22",
        strokeOpacity: 0.7,
        icons: [{
            icon: pathSymbol,
            offset: '50%'
        }],
        strokeWeight: 2
});

conPath.setMap(map);


google.maps.event.addListener(conPath, 'click', (function(l,conCoord) {
    return function() {
            infowindowPath.setContent("<b>Ligação "+connections[l].id);
        infowindowPath.setPosition(new google.maps.LatLngBounds(conCoord[1], conCoord[0]).getCenter());
            infowindowPath.open(map);
        }
})(l,conCoord));

Answer 1

我也需要这个功能,但遗憾的是它不可能 - 我几乎是正面的(参见我的演示).我这么说的原因是因为:

1. 我尝试了很多不同的方法,但只有Polyline收到了这个事件
2. Google的文档中没有明确记录

3. 文件的以下部分暗示:

   从符号文档:

   甲符号是可以在任一被显示的基于矢量的图像标记或折线对象.

   从AddEventListener上的文档:

   addListener(instance:Object, eventName:string, handler:Function)

   将给定的侦听器函数添加到给定对象实例的给定事件名称.返回此侦听器的标识符,该标识符可与removeListener()一起使用.

事件可以附加到对象实例(例如标记或折线).由于符号是在折线上渲染的基于矢量的图像,因此它们包含在其中,而不是正式的对象实例.显然,这使他们没有资格将事件附加到自己身上.

现在,我仍然怀疑的是,我的理性上述意味着符号是折线的一部分,这意味着它也应该接收附加到折线的相同事件.但是,在我的试验中,情况并非如此(此处演示:无论折线上的符号大小如何,它都不会收到任何事件):

var mySymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 25,
    strokeWeight: 5,
    fillOpacity: .2
};

var myPolyline = new google.maps.Polyline({
    icons: [{
        icon: mySymbol,
        fixedRotation: true,
        offset: '50%',
    }],
    path: [polylineCenter, polylineEnd],
    strokeColor: 'black',
    strokeOpacity: 1,
    strokeWeight: 5,
    map: myMap
});

// works since <myPolyline> is an instance of an Object
google.maps.event.addListener(myPolyline, 'click', function() {
    alert('Polyline clicked!');
});

// doesn't work :-( since <mySymbol> is an Object literal
google.maps.event.addListener(mySymbol, 'click', function() {
    alert('Symbol clicked!');
});