谷歌地图：可点击的折线图标

Question

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

看到了这个帖子，但没有具体说明图标是如何可点击的。我搜索了它的代码源，但他添加了一个 KML 层。我不想那样做。 Google Maps: Attaching events on polyline icons

搜索了谷歌地图覆盖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

我也需要这个功能，但不幸的是这是不可能的——我几乎是肯定的（见我的demo）。我之所以这么说是因为：

1. 我尝试了很多不同的方式，但只有折线接收事件
2. Google 的文档中没有明确记录

3. 文档的以下部分意味着什么：

   来自documentation on Symbols：

   符号是基于矢量的图像，可以显示在Marker或Polyline对象上。

   来自documenation on the AddEventListener：

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

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

事件可以附加到对象实例（例如标记或折线）。由于符号是基于矢量的图像，在在折线上呈现，它们包含在其中，而不是正式的 Object 实例。显然，这使他们没有资格将事件附加到自己身上。

现在，我仍然有疑问的是，我上面的理性暗示符号是折线的一部分，这意味着它也应该接收与折线相连的相同事件。但是，在我的试验中，情况并非如此（demo here：无论折线上的符号大小，它都不会接收任何事件）：

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