在谷歌地图中制作折线的宽度为 5 像素，但看起来像 2 像素

Question

我在谷歌api地图上有Polyline和Javascript。我使用鼠标悬停事件调用一个函数来显示有关该折线的信息框。问题是我必须在折线上精确地移动鼠标像素，以便触发事件。但是，折线的宽度只有 2px，因此用户很难做到这一点。例如，我可以将折线的宽度增加到 5px，但由于折线太大，这样会使界面看起来不好。有什么方法可以将折线增加到 5px，但它仍然看起来像 2 px，或者当我们将鼠标移动到足够靠近折线的位置时，您是否有任何其他想法来显示信息框。

Answer 1

制作一条宽度为 5px 的透明折线，并向其添加点击侦听器。

概念验证小提琴

代码片段：

function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var xml = parseXml(lineXmlStr);
var points = xml.getElementsByTagName("point");
var path = [];
for (var i = 0; i < points.length; i++) {
var pt = new google.maps.LatLng(
parseFloat(points[i].getAttribute("lat")),
parseFloat(points[i].getAttribute("lng"))
);
path.push(pt);
}
var polylineThin = new google.maps.Polyline({
map: map,
path: path,
strokeWeight: 2,
clickable: false
});
var polylineClickable = new google.maps.Polyline({
map: map,
path: path,
strokeWeight: 5,
strokeOpacity: 0
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(polylineClickable, 'click', function(evt) {
infowindow.setPosition(evt.latLng);
infowindow.setContent("you clicked at " + evt.latLng.toUrlValue(6));
infowindow.open(map);
});
}
google.maps.event.addDomListener(window, "load", initialize);
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('MicrosoftXMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
};
var lineXmlStr = "<line><point lat='37.441980' lng='-122.142920' /><point lat='37.442150' lng='-122.143180' /><point lat='37.442150' lng='-122.143180' /><point lat='37.441960' lng='-122.143790' /><point lat='37.441820' lng='-122.144290' /><point lat='37.441520' lng='-122.145320' /><point lat='37.441380' lng='-122.145810' /><point lat='37.441280' lng='-122.146180' /><point lat='37.441210' lng='-122.146400' /><point lat='37.440910' lng='-122.147470' /><point lat='37.440410' lng='-122.149200' /><point lat='37.440300' lng='-122.149590' /><point lat='37.440170' lng='-122.150030' /><point lat='37.439890' lng='-122.151060' /><point lat='37.439870' lng='-122.151140' /><point lat='37.439850' lng='-122.151190' /><point lat='37.439850' lng='-122.151200' /><point lat='37.439690' lng='-122.151690' /><point lat='37.439680' lng='-122.151720' /><point lat='37.439670' lng='-122.151760' /><point lat='37.439620' lng='-122.151930' /><point lat='37.439550' lng='-122.152170' /><point lat='37.439410' lng='-122.152700' /><point lat='37.439250' lng='-122.153290' /><point lat='37.439230' lng='-122.153450' /><point lat='37.439230' lng='-122.153460' /><point lat='37.439110' lng='-122.153900' /><point lat='37.439000' lng='-122.154310' /><point lat='37.438890' lng='-122.154570' /><point lat='37.438890' lng='-122.154570' /><point lat='37.438890' lng='-122.154700' /><point lat='37.438880' lng='-122.154730' /><point lat='37.438880' lng='-122.154760' /><point lat='37.438800' lng='-122.155000' /><point lat='37.438620' lng='-122.155620' /><point lat='37.438480' lng='-122.156100' /><point lat='37.438480' lng='-122.156100' /><point lat='37.438660' lng='-122.156380' /><point lat='37.438790' lng='-122.156560' /><point lat='37.439570' lng='-122.157790' /><point lat='37.440360' lng='-122.159050' /><point lat='37.441030' lng='-122.160120' /><point lat='37.441130' lng='-122.160280' /><point lat='37.441170' lng='-122.160340' /><point lat='37.441430' lng='-122.160770' /><point lat='37.441900' lng='-122.161520' /><point lat='37.442160' lng='-122.161930' /><point lat='37.442680' lng='-122.162760' /><point lat='37.442990' lng='-122.163250' /><point lat='37.443020' lng='-122.163320' /><point lat='37.443090' lng='-122.163340' /><point lat='37.443130' lng='-122.163440' /><point lat='37.443170' lng='-122.163550' /><point lat='37.443200' lng='-122.163710' /><point lat='37.443240' lng='-122.163890' /><point lat='37.443260' lng='-122.163980' /><point lat='37.443280' lng='-122.164060' /><point lat='37.443310' lng='-122.164120' /><point lat='37.443340' lng='-122.164170' /><point lat='37.443380' lng='-122.164220' /><point lat='37.443460' lng='-122.164290' /><point lat='37.443550' lng='-122.164360' /><point lat='37.443650' lng='-122.164430' /><point lat='37.443760' lng='-122.164510' /><point lat='37.443800' lng='-122.164540' /><point lat='37.443810' lng='-122.164560' /><point lat='37.443880' lng='-122.164650' /><point lat='37.443920' lng='-122.164740' /><point lat='37.444010' lng='-122.164860' /><point lat='37.444260' lng='-122.165300' /><point lat='37.444540' lng='-122.165730' /><point lat='37.445040' lng='-122.166500' /><point lat='37.445070' lng='-122.166540' /><point lat='37.445850' lng='-122.167780' /><point lat='37.446480' lng='-122.168770' /><point lat='37.446560' lng='-122.168880' /><point lat='37.446610' lng='-122.168940' /><point lat='37.446690' lng='-122.169060' /><point lat='37.446690' lng='-122.169060' /><point lat='37.446700' lng='-122.169140' /><point lat='37.446710' lng='-122.169300' /><point lat='37.446700' lng='-122.169500' /><point lat='37.446690' lng='-122.169570' /><point lat='37.446670' lng='-122.169740' /><point lat='37.446630' lng='-122.170260' /><point lat='37.446630' lng='-122.170360' /><point lat='37.446630' lng='-122.170360' /><point lat='37.446620' lng='-122.170610' /><point lat='37.446620' lng='-122.170700' /><point lat='37.446620' lng='-122.170890' /><point lat='37.446620' lng='-122.170950' /><point lat='37.446630' lng='-122.170990' /><point lat='37.446640' lng='-122.171030' /><point lat='37.446660' lng='-122.171080' /><point lat='37.446680' lng='-122.171140' /><point lat='37.446700' lng='-122.171180' /><point lat='37.446720' lng='-122.171220' /><point lat='37.446740' lng='-122.171260' /><point lat='37.446760' lng='-122.171290' /><point lat='37.446760' lng='-122.171310' /><point lat='37.446800' lng='-122.171470' /><point lat='37.446960' lng='-122.171690' /><point lat='37.447060' lng='-122.171840' /><point lat='37.447190' lng='-122.172020' /><point lat='37.447360' lng='-122.172270' /><point lat='37.447590' lng='-122.172650' /><point lat='37.447760' lng='-122.172910' /><point lat='37.447820' lng='-122.173010' /><point lat='37.448490' lng='-122.174060' /><point lat='37.448530' lng='-122.174120' /><point lat='37.448750' lng='-122.174470' /><point lat='37.449790' lng='-122.176040' /><point lat='37.449880' lng='-122.176170' /><point lat='37.450030' lng='-122.176380' /><point lat='37.450230' lng='-122.176700' /><point lat='37.450510' lng='-122.177130' /><point lat='37.450650' lng='-122.177340' /><point lat='37.450800' lng='-122.177600' /><point lat='37.451030' lng='-122.177980' /><point lat='37.451170' lng='-122.178220' /><point lat='37.451280' lng='-122.178400' /><point lat='37.451490' lng='-122.178780' /><point lat='37.451610' lng='-122.178990' /><point lat='37.451730' lng='-122.179210' /><point lat='37.451760' lng='-122.179270' /><point lat='37.452000' lng='-122.179700' /><point lat='37.452090' lng='-122.179860' /><point lat='37.452280' lng='-122.180240' /><point lat='37.452300' lng='-122.180270' /><point lat='37.452420' lng='-122.180510' /><point lat='37.452980' lng='-122.181630' /><point lat='37.453010' lng='-122.181680' /></line>";

html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>