Question

我有一张带有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/

Answer 1

不要让图层打开弹出窗口，而是使用st->status[]使用事件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（请参阅doc）。

Answer 2

以下是来自an answer的Per Liedman，传单维护者：

您可以通过创建新弹出窗口并在所需位置添加而不是绑定它来实现此目的。由于绑定的弹出窗口可以通过鼠标点击以外的其他方式打开，因此无法知道打开的位置。

以下是相应的代码：

// 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) {

  layer.on('click mouseover', function (e) {
    var popup = L.popup()
        .setLatLng(e.latlng)
        .setContent('text')
        .openOn(map);
  });
});

请参阅此处以获取修改后的示例：http://jsfiddle.net/uwdnvfy6/

Answer 3

（@ YaFred）接受的答案非常好，关键是更新功能layer.on('mousemove'...。但是，按照书面规定，每当鼠标移动时关闭和打开弹出窗口，都会使其闪烁。相反，在layer.('mousemove...中，您仅需要更新位置的行：

// add popup for the layer
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();
  });

  // update popup location
  layer.on('mousemove', function (e) {
    popup.setLatLng(e.latlng).openOn(map);
  });
});

Leaflet：在光标位置而不是LineString中心打开弹出窗口

3 个答案: