Question

我在谷歌api地图上使用Javascript进行折线。我使用mouseover事件调用函数来显示有关该折线的信息框。问题是我必须在折线上精确地移动鼠标像素，以便触发事件。但是，折线的宽度仅为2px，因此用户很难做到这一点。例如，我可以将折线的宽度增加到5px，但这样会因为折线太大而使界面看起来不太好。有没有像我可以将折线的增加到5px，但它仍然看起来像2像素，或者当我们将鼠标移动到足够接近折线时，你还有其他任何想法来显示信息框。

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>

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

1 个答案: