Question

我想在Leaflet地图上的项目中从Json Data绘制标记

我目前正在这样做

L.marker([48.840346,2.319415]).addTo(map).
   bindPopup("<b>X<b>"<img style='width: 100%' src='http://i.imgur.com/XMVjS1s.jpg'/></div> ",{minWitdh:256} ");

我必须自己输入所有信息，这不是我想要的方式

但我有一个Data.json

  {
      "title": "A",
      "lat": 48.841491,
      "long": 2.355989,

   },
    {
      "title": "B",
      "lat": 48.878849,
      "long": 2.312855,
      },

我想做这样的事情

 L.marker([lat,long]).addTo(map).
   bindPopup("<b>title<b>"<img style='width: 100%' src='http://i.imgur.com/XMVjS1s.jpg'/></div> ",{minWitdh:256} ");

获取所有数据并在地图上将其渲染为标记？

Answer 1

由于您已经拥有本地json文件，所以您需要做的就是使用HTTP GET请求下载json文件并使用for循环添加所有点。

我不熟悉Ionic2所以我假设有一个方法Http.get()来发送GET请求并返回一个数据为JSON的promise。然后你可以这样做：

Http.get('local json file path')
    .then((data) => {
      // I assume there is an array in your json file
      data.forEach((point) => {
        L.marker([point.lat, point.long])
         .bindPopup("<b>" + point.title + "<b><img style='width: 100%' src='http://i.imgur.com/XMVjS1s.jpg'/>");  
         .addTo(map);
      });
    })；

小叶标记+来自JSON数据的信息弹出

1 个答案: