Leaflet.js - 创建标记并在地图上显示弹出窗口

Question

当我单击某个 HTML 元素时，我使用Leaflet JavaScript API创建一个弹出窗口。问题是弹出窗口不会显示在我的地图上。我不确定我的代码有什么问题。

以下是 json 文件中的功能示例。请注意，为了方便起见，我将整个 json 对象指定为 a var dataset。

var dataset = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "stemburo": "Sporthal Nieuwland",
        "aantal_stemmen": 3753,
        "lat": 52.2006665,
        "lng": 5.3758691,
        "Actief": 34,
        "Amersfoort 2014": 348,
        "Blanco lijst Chel": 5,
        "Burger Partij Amersfoort": 258,
        "Christen Democratisch App\u00e9l": 556,
        "ChristenUnie": 350,
        "DENK": 117,
        "Democraten 66": 525,
        "GroenLinks": 345,
        "Partij van de Arbeid": 239,
        "Socialistische Partij": 189,
        "Staatkundig Gereformeerde Partij": 42,
        "Volkspartij voor Vrijheid en Democratie": 717,
        "Vrede en Recht": 28
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          5.3758691,
          52.2006665
        ]
      }
    }

下面是我的 JavaScript 代码的一部分，用于创建 HTML 元素。我使用 JQuery$.each来读取数据集。我将“stemburo”属性值（来自 json 对象）指定为元素的 id 属性。

当单击某个元素时，它会检查单击的 id 值是否与其中一个值相同properties.stemburo。随后，应根据属性的坐标显示一个弹出窗口。

$.each(dataset.features,function(key,val){
    var stemlocaties =val.properties.stemburo;
    var newElement= document.createElement('a');
    newElement.id= stemlocaties;
    newElement.className='list-group-item list-group-item-action';
    newElement.innerHTML=stemlocaties;
    document.getElementById('stemlocaties').appendChild(newElement);

    newElement.onclick=function(){
        if (val.properties.stemburo===this.id){
            var lng = val.geometry.coordinates[0];
            var lat = val.geometry.coordinates[1];
            L.popup()
              .setLatLng([lat,lng])
              .setContent('New popup text!')
              .openOn(map);

        }
    };

    }); 

我对 JavaScript 还很陌生。对于任何反馈，我们都表示感谢。

Answer 1

这是解决您面临的问题的另一种方法。如果您阅读leaflet.js 文档，可以了解如何添加标记并附加弹出对话框并向其

\n\n

这是添加标记并附加弹出窗口的行。L.marker(location).addTo(myMap).bindPopup(popupContent)。

\n\n

需要花费更多的精力来安排数据，以便能够轻松地映射它、创建位置以及可用于填充弹出窗口的信息的 popupContent 变量。以下是如何使用您提供的数据集并使用弹出窗口创建标记的示例。

\n\n

\r\n

\r\n

// Create the map and set the view and some properties\r\nvar myMap = L.map(\'mapid\').setView([52.2, 5.37], 12);\r\nL.tileLayer(\'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw\', {\r\n  // maxZoom: 5,\r\n  attribution: \'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, \' +\r\n    \'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, \' +\r\n    \'Imagery \xc2\xa9 <a href="https://www.mapbox.com/">Mapbox</a>\',\r\n  id: \'mapbox.streets\'\r\n}).addTo(myMap);\r\n\r\nvar dataset = {\r\n  "type": "FeatureCollection",\r\n  "features": [\r\n    {\r\n      "type": "Feature",\r\n      "properties": {\r\n        "stemburo": "Sporthal Nieuwland",\r\n        "aantal_stemmen": 3753,\r\n        "lat": 52.2006665,\r\n        "lng": 5.3758691,\r\n        "Actief": 34,\r\n        "Amersfoort 2014": 348,\r\n        "Blanco lijst Chel": 5,\r\n        "Burger Partij Amersfoort": 258,\r\n        "Christen Democratisch App\\u00e9l": 556,\r\n        "ChristenUnie": 350,\r\n        "DENK": 117,\r\n        "Democraten 66": 525,\r\n        "GroenLinks": 345,\r\n        "Partij van de Arbeid": 239,\r\n        "Socialistische Partij": 189,\r\n        "Staatkundig Gereformeerde Partij": 42,\r\n        "Volkspartij voor Vrijheid en Democratie": 717,\r\n        "Vrede en Recht": 28\r\n      },\r\n      "geometry": {\r\n        "type": "Point",\r\n        "coordinates": [\r\n          52.2006665,\r\n          5.3758691\r\n        ]\r\n      }\r\n    }\r\n  ]\r\n};\r\n\r\n// map over the dataset features, create a marker for each and link a popup.\r\ndataset.features.map(function(feature) {\r\n\tconst location = feature.geometry.coordinates;\r\n  let partijen = Object\r\n  \t.keys(feature.properties)\r\n    .filter(item => ![\'stemburo\', \'lat\', \'lng\'].includes(item));\r\n  \r\n  const popupContent = \r\n  \t\'<h2>\' + \r\n    \tfeature.properties.stemburo + \r\n    \'</h2>\' + \r\n    partijen.map((naam) => \'<p><strong>\' + naam + \'</strong>: \' + feature.properties[naam] + \'</p>\').join(\'\');\r\n  \r\n  // add the marker and popup to the map.\r\n  L.marker(location).addTo(myMap).bindPopup(popupContent);\r\n});

\r\n

#mapid {\r\n  height: 400px;\r\n}\r\n\r\n.leaflet-popup-content p {\r\n    margin: 3px 0 !important;\r\n}

\r\n

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />\r\n\r\n<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>\r\n\r\n<div id="mapid"></div>

\r\n

\r\n

\r\n

\n\n

这也是一个jsFiddle带有相同示例的

\n