在Google地圖中製作多段線的寬度爲5像素，但看起來像是2像素

Question

我在帶有Javascript的Google API地圖上有多段線。我使用一個mouseover事件來調用一個函數來顯示關於該折線的信息框。問題是我必須移動鼠標像素 - 精確地在多段線上，以便事件被觸發。但是，折線的寬度僅爲2px，因此用戶很難做到這一點。例如，我可以將多段線的寬度增加到5px，但這樣會使界面看起來不好，因爲折線太大。有沒有什麼辦法像我可以將折線增加到5px，但它仍然看起來像2px，或者當我們將鼠標移動到折線足夠接近時，您是否有任何其他想法來顯示信息框。

Answer 1

製作寬度爲5px的透明折線，將點擊偵聽器添加到該寬度。

proof of concept fiddle

代碼片段：

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>