Question

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

这是（不工作）示例结果如何： http://spatialcomp.cz/click/

Answer 1

编辑：这适合您的情况使用gson

＆＃13;

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);

＆＃13;

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

如果您只有几个标记

，这是最简单的方法

假设你创建了这样的地图：

＆＃13;

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

＆＃13;

和这样的标记：

＆＃13;

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

＆＃13;

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

＆＃13;

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
  }

＆＃13;

Answer 2

如果我理解正确，您需要使用点击事件创建标记

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

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

你到底遇到了什么问题？（你可以评论我的帖子）

Leaflet - 将JSON属性获取为html

2 个答案:

编辑：这适合您的情况使用gson

如果您只有几个标记