悬停时不在屏幕上显示 id

Question

我正在使用 leaflet 和 mapbox，当鼠标悬停在地图中的线上时，我使用该功能在屏幕上打印 id numer。

geojson = L.geoJson(lines, {
    style: style,
    onEachFeature: onEachFeature
}).addTo(map);

var info = L.control();

info.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
    this.update();
    return this._div;
};


info.update = function (props) {
    this._div.innerHTML = '<h4><b>Links<b></h4>' +  (props ?
        '<b>Link' + props.id + '</b><br />'  
        : 'Hover over a link');


};

info.addTo(map);

我画线的方式是通过下面的geoJSON文件

var lines = {
    "type": "FeatureCollection",
    "features": [{
        "type": "LineString",
        "coordinates": [
            [103.85, 1.28992],
            [103.89, 1.294],
            [103.83, 1.216]
        ],
        "properties": { "id": "1" }
    }, {
        "type": "LineString",
        "properties": { "id": "2" },
        "coordinates": [
            [103.5, 1.292],
            [103.9, 1.4],
            [103.3, 1.21]
        ]
    }, {
        "type": "LineString",
        "properties": { "id": "3" },
        "coordinates": [
            [103.6, 1.291],
            [103.6, 1.39],
            [103.3, 1.29]
        ]
    }]
};

但是当我将鼠标悬停在该行上时它显示 "undefined" 而不是显示 id.Any 帮助表示赞赏

Answer 1

你的onEachFeature声明在哪里？ update 从哪里调用？您的代码不完整。

此外，您的 GeoJSON 不符合 GeoJSON specifications。一个FeatureCollection必须包含Feature，每个Feature必须有一个Geometry .

所以代替：

{
  "type": "LineString",
  "properties": { "id": "3" },
  "coordinates": [[103.6,1.291],[103.6,1.39],[103.3,1.29]]
}

它应该是这样的：

{
    "type": "Feature",
    "geometry": {
        "type": "LineString",
        "coordinates": [[103.6,1.291],[103.6,1.39],[103.3,1.29]]
    },
    "properties": {
        "id": "3"
    },
}

悬停时不在屏幕上显示 id

Not showing the id in the screen when hovering

javascript

jquery

geojson

leaflet

mapbox