我有一个带LineString的传单地图。

// a GeoJSON LineString
var geojson = {
  "type": "Feature",
  "geometry": {
    "type": "LineString",
    "coordinates": [[-101.123, 40.2500], [-101.123, 40.2503]]
  }
};

// create map and add json
var map = L.map('map');
var geojsonLayer = new L.GeoJSON(geojson).addTo(map);
map.fitBounds(geojsonLayer.getBounds())

// add popup for the line
geojsonLayer.eachLayer(function (layer) {
  var popup = L.popup();
  popup.setContent('text');

  layer.bindPopup(popup);
  layer.on('click mouseover', function () {
    layer.openPopup();
  });
});


当我在它上面时,将在LineString中心打开一个弹出窗口。

如何使它在光标位置打开?

这是一个简单的工作示例:http://jsfiddle.net/wuu8Lv2t/1/

最佳答案

不要让图层打开弹出窗口,而是使用openOn(map)设置事件e.latlng中的坐标位置

// add popup for the line
geojsonLayer.eachLayer(function (layer) {
  var popup = L.popup();
  popup.setContent('text');
  layer.bindPopup(popup);

  layer.on('mouseover', function (e) {
    var popup = e.target.getPopup();
    popup.setLatLng(e.latlng).openOn(map);
  });

  layer.on('mouseout', function(e) {
     e.target.closePopup();
  });

  layer.on('mousemove', function (e) {
    e.target.closePopup();
    var popup = e.target.getPopup();
    popup.setLatLng(e.latlng).openOn(map);
  });
});


请注意,在您的问题中存在一个错误:您不能在事件处理程序中使用变量layer,而必须使用e.target(请参见doc)。

关于javascript - 传单:在光标位置而不是LineString中心打开弹出窗口,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41522376/

10-12 12:54
查看更多