传单标记 + 来自 JSON 数据的信息弹出窗口

Question

我想在传单地图上的项目中从 Json 数据中绘制标记

我目前正在以这种方式做

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

我

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

但我有一个数据.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 形式返回数据的承诺。然后你可以做：

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