5

I have two markers with a polyline connecting the two. I have click events on the markers and the polyline, but i was trying to make the polyline easier to click without placing a new marker or increasing it's strokeWeight. So I created a circular icon and placed on the polyline, but I can't make it clickable. Is it possible?

Saw this thread but doesn't give any specifics on how the icon is clickable. I searched it's code source but he adds a KML layer. I didn't want to do that. Google Maps: Attaching events on polyline icons

Searched the google maps overlay API but didn't find any interface to listen to click events. https://developers.google.com/maps/documentation/javascript/overlays#Polylines

I also tried to attach an event listener but didn't work. I suspect it can't be done without adding an actual marker or an object but if someone else had a similar problem i would appreciate any tips :)

Thanks in advance!

My code:

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

1 回答 1

5

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

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

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

    从Symbols的文档中：

    符号是基于矢量的图像，可以显示在标记或折线对象上。

    从AddEventListener上的文档：

    addListener（实例：对象，事件名称：字符串，处理程序：函数）

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

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

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

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!');
});
于 2013-05-14T10:31:34.497 回答