代码之家 › 专栏 › 技术社区 › Hugo H

传单:在光标位置而不是线串中心打开弹出窗口

geojson leaflet javascript

Hugo H · 技术社区 · 9 年前

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

3 回复 | 直到 9 年前

YaFred 9 年前

不要让层打开弹出窗口,而是使用 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 在事件hander中,您必须使用 e.target (见 doc ).

Hugo H 9 年前

这是一个 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/

JMers 7 年前

被接受的答案(由@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);
  });
});