Leaflet

Question

我是 javascript / Leaflet 初学者，我想为我的网络地图添加一些交互性：带有 JSON 点数据的地图包含在网页中。地图下方是文本<div>，我想从地图中的点获取信息。所以我需要：单击地图中的标记并在下面的文本中显示其名称（来自 JSON 属性）。谁能帮我怎么做？谢谢！

这是（无效的）示例结果如何： http://spatialcomp.cz/click/

Answer 1

如果我没理解错的话，你需要用点击事件创建标记

http://leafletjs.com/reference.html#marker-click

并在事件中从属性中提取数据，然后以某种方式插入它们（使用 jQuery，例如，如果您想要简单的话）

你的问题到底是什么？（可以评论我的post）

Answer 2

编辑：这适合您使用 gson

的情况

var mista = {"type":"FeatureCollection",
        "features":[
          {"type":"Feature","properties":{"ID":1},"geometry":{"type":"Point","coordinates":[-72.6936149597168,19.45777124789975]}},
          {"type":"Feature","properties":{"ID":2},"geometry":{"type":"Point","coordinates":[-72.68546104431152,19.45170148462148]}},
          {"type":"Feature","properties":{"ID":3},"geometry":{"type":"Point","coordinates":[-72.67576217651367,19.44846418467642]}},
          {"type":"Feature","properties":{"ID":4},"geometry":{"type":"Point","coordinates":[-72.69455909729002,19.44789765054524]}},
        ]
      }
  
      //create a function, that is bound to one point of your features
      function onEachFeature(features, layer) {
        //check if your feature has all properties, you want to display
        if(features.properties.ID && features.geometry.coordinates) {
          //create a click event for each point
          layer.on("click", function(e) {
            document.getElementById('pravy').innerHTML =
              "coordinates: " + features.geometry.coordinates + "</br> ID: " 
                + features.properties.ID;
          });
        }
      }

      var dataHaiti = L.geoJson(mista, 
          {
            //bind the function as option to each layer
            onEachFeature: onEachFeature    
          }).addTo($scope.map);

http://leafletjs.com/examples/geojson.html

如果你只有几个标记，这是最简单的方法

假设您创建的地图是这样的：

var map = L.map("map");

和这样的标记：

var marker = L.marker(new L.LatLng(11.145673, 48.890023)).addTo(map);

然后您可以像这样向标记添加一个 onClick 事件：

marker.on('click', getLatLngOfClick);

function getLatLngOfClick(e) {
  //get the coordinates of the click event
  var lat = e.latnlng.lat;
  var lng = e.latlng.lng;
  
  //now you can work with the variables, however you like
  //
  //insert your code below
  }

Leaflet - 获取 JSON 属性到 html

Leaflet - get JSON properties to html

javascript

编辑：这适合您使用 gson

如果你只有几个标记，这是最简单的方法