Question

这是我来自API的json数据：

{"datapoint":[{"id":"H0031","In_time":{"date":"2017-10-24 10:41:17.783000"},"lat1":"24.55","long1":"71.75","lat2":"27.715186","long2":"83.323999"}]}

我想遍历日期并显示多个标记。

这是我的完整代码：

fetch('http://www.example.com/?qty=10')
        .then((response) => response.json())
        .then((response) => {
            let datapoint = response.datapoint;
            for (let i=0; i<datapoint.length; i++) {

                let hlat = parseFloat(datapoint[i]["lat1"]);
                let hlon = parseFloat(datapoint[i]["long1"]);
                let glat = parseFloat(datapoint[i]["lat2"]);
                let glon = parseFloat(datapoint[i]["long2"]);
                let markerLocation1 = new L.LatLng(hlat, hlon);
                let marker1 = new L.marker(markerLocation1,{icon: greenIcon});
                marker1.addTo(map).bindPopup(popup,customOptions);
                let markerLocation2 = new L.LatLng(glat, glon);
                let marker2 = new L.marker(markerLocation2,{icon: BlueIcon});
                marker2.addTo(map).bindPopup(popup,customOptions);
                var latlngs=[];
                let latlng1=[hlat,hlon];
                let latlng2=[glat,glon];
                var offsetX=latlng2[1]-latlng1[1];
                var offsetY=latlng2[0]-latlng1[0];
                var r=Math.sqrt(Math.pow(offsetX,2)+Math.pow(offsetY,2)), theta = Math.atan2(offsetY,offsetX);
                var thetaoffset=(3.14/10);
                var r2 = (r/2)/(Math.cos(thetaoffset)),
                    theta2 = theta + thetaoffset;
                var midpointX = (r2 * Math.cos(theta2)) + latlng1[1],
                    midpointY = (r2 * Math.sin(theta2)) + latlng1[0];

                var midpointLatLng = [midpointY, midpointX];

                latlngs.push(latlng1, midpointLatLng, latlng2);
                var pathOne = L.curve(['M',latlng2,'Q',midpointLatLng,latlng1], {snakeArray: 5, color:'grey' ,animate: {duration: 2500, iterations: 2}}).addTo(map);

            }

        })

............................................... ................................................... ....................................

Answer 1

我更新了答案，以使用API类似示例向您演示示例。

我创建了一个名为data.geojson的额外文件，用于在其中存储geojson以模仿api网址：

{
  "datapoint": [{
      "id": "H0031",
      "In_time": {
        "date": "2017-10-24 10:41:17.783000"
      },
      "lat1": "24.55",
      "long1": "71.75",
      "lat2": "27.715186",
      "long2": "83.323999"
    },
    {
      "id": "H0032",
      "In_time": {
        "date": "2017-10-25 10:41:17.783000"
      },
      "lat1": "28.55",
      "long1": "74.75",
      "lat2": "29.715186",
      "long2": "88.323999"
    }
  ]
}

js代码：

let geojson;
// instead of data.geojson you will place your API url
$.getJSON("data.geojson", function(data) {
  geojson = data;
  const dataPoint = geojson.datapoint;

  // store all the coordinates in this array o be able to iterate over the markers array
  let coordinates = [];

  // populate coordinates array with all the markers
  for (let i = 0; i < dataPoint.length; i++) {
    coordinates.push([Number(dataPoint[i].lat1), Number(dataPoint[i].long1)], [Number(dataPoint[i].lat2), Number(dataPoint[i].long2)]);
  };
  // console.log(coordinates);

  // visualize the markers on the map
  for (let i = 0; i < coordinates.length; i++) {
    L.marker(coordinates[i]).addTo(map)
      .bindPopup("<b>Latitude:</b> " + coordinates[i][0] + " <b>Longitude:</b> " + coordinates[i][1]);
  };
});

Demo

如何在带有条件标记渲染的传单地图中访问嵌套的json对象并使用该对象显示标记

1 个答案: