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

Question

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

5

我有两个标记点，它们之间连接着一条折线。我为这些标记点和折线添加了点击事件，但是我想让折线更容易被点击，而不用加新的标记点或增大其线宽。所以我创建了一个圆形图标并放在了折线上，但是我无法使它可点击。这是否可能呢？

我看到了这个帖子，但没有具体说明如何使图标可点击。我查看了其代码源文件，但是他添加了一个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));

- Hugo Rocha

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paulo · Accepted Answer

我也有这个功能的需求，但不幸的是这是不可能的 - 我几乎可以确定（请参见我的演示）。我这么说的原因是：

我尝试了很多不同的方法，但只有折线能接收事件。
在谷歌文档中没有明确说明。
以下文档的部分含义并非明确：

来自“符号”文档：

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

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