javascript - 谷歌地图 : clickable polyline icon

Question

我有两个标记，用多段线连接两者。我在标记和多段线上有点击事件，但我试图在不放置新标记或增加其笔划权重的情况下使多段线更容易单击。所以我创建了一个圆形图标并放置在折线上，但我无法使其可点击。是否可以？

看到了这个帖子，但没有给出任何关于图标如何可点击的细节。我搜索了它的代码源，但他添加了一个 KML 层。我不想那样做。 Google Maps: Attaching events on polyline icons

搜索了google maps overlay API，没有找到监听点击事件的接口(interface)。 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. 我尝试了很多不同的方法，但只有 Polyline 收到了事件
2. Google 的文档中没有明确记录

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

   来自documentation on Symbols :

   A Symbol is a vector based image that can be displayed on either a Marker or a Polyline object.

   来自documenation on the AddEventListener :

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

   Adds the given listener function to the given event name for the given object instance. Returns an identifier for this listener that can be used with removeListener().

Events can be attached to Object instances (such as a Marker or Polyline). Since Symbols are vector-based images that are rendered on a Polyline, they are contained within it, and not officially Object instances. Apparently, this makes them ineligible to have events attached to themselves.

Now, what I'm still left in doubt is that my rational above implies that a Symbol is part of the Polyline meaning it should also receive the same events that were attached to the Polyline. However, in my trials, this isn't the case (demo here: regardless the size of the Symbol on a Polyline, it does not receive any events):

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