从 JSON 解析经纬度

Question

我有一个带有 lat 和 long 格式的 JSON 文件，用于为地图标记调用位置 {lat, lng}。

我正在尝试执行 getJSON，对于每个不正确的纬度和经度，将其发送到一个函数，该函数将其解析为正确的格式并向我的地图添加一个标记。

虽然我没有任何运气。 它像“latLang”一样输入：“27.8247427：-82.75040159999999”

这是 JSON 的链接以供参考。 JSON

这是我的代码。

$(document).ready(function() {
    $.getJSON("http://cs1.utm.edu/~bbradley/map1/customers1.json", function(data) {
      const markers = data.map(({
        latLang
      }) => new google.maps.Marker({
        map: myMap,
        position: new google.maps.LatLng(parseGeo(latLang))
      }));
    });
  });

  const parseGeo = str => { // this is to parse it into the right format
    const [lat, lng] = str.split(':').map(value => parseFloat(value, 10));
    return {
      lat,
      lng
    };
  }

从 JSON 中提取

[{
        "name": "Carole McKenzie",
        "address": "5720 80TH ST NORTH UNIT 310",
        "cityStateZip": "ST PETERSBURG, Florida 33709",
        "latLang": "27.8247427:-82.75040159999999",
        "image": "./people/MTI4MTYuanBn.jpg"
    },
    {
        "name": "Matt Russell",
        "address": "1211 Miller Place Dr",
        "cityStateZip": "Bryant, Arkansas 72022-2389",
        "latLang": "34.606806:-92.5042948",
        "image": "./people/MTQ3OTUuanBn.jpg"
    },
    {
        "name": "George Thrapp",
        "address": "2906 Haddington Court",
        "cityStateZip": "North Chesterfield, Virginia 23224-5716",
        "latLang": "37.466937:-77.5075449",
        "image": "./people/MTk3NTkuanBn.jpg"
    },

Answer 1

乍一看，我认为您遇到的问题可能是您传入了两个字符串，而不是具有数字lat和lng属性的对象。

我认为你可以简化它。 以下是我如何处理这样的事情：

 const data = [{ "name": "Carole McKenzie", "address": "5720 80TH ST NORTH UNIT 310", "cityStateZip": "ST PETERSBURG, Florida 33709", "latLang": "27.8247427:-82.75040159999999", "image": "./people/MTI4MTYuanBn.jpg" }, { "name": "Matt Russell", "address": "1211 Miller Place Dr", "cityStateZip": "Bryant, Arkansas 72022-2389", "latLang": "34.606806:-92.5042948", "image": "./people/MTQ3OTUuanBn.jpg" }, { "name": "George Thrapp", "address": "2906 Haddington Court", "cityStateZip": "North Chesterfield, Virginia 23224-5716", "latLang": "37.466937:-77.5075449", "image": "./people/MTk3NTkuanBn.jpg" }, { "name": "Trina Anderson", "address": "112 South Niles Avenue", "cityStateZip": "South Bend, Indiana 46617", "latLang": "41.6759656:-86.24418419999999", "image": "./people/NDExMTAuanBn.jpg" } ]; // utility function for turning the latLang string into an object with lat and lng properties, eg // "41.6759656:-86.24418419999999" => {lat: 41.6759656, lng: -86.24418419999999} const parseGeo = str => { const [lat, lng] = str.split(':').map(value => parseFloat(value, 10)); return { lat, lng }; } // convert all of the input items to lat/lng numeric props instead of latLang string const parsed = data.map(({latLang, ...other}) => ({ ...other, ...parseGeo(latLang) })); console.log(parsed);

从那里你可以迭代解析的值并构建标记：

const markers = parsed.map(({lat, lng}) => (
  new google.maps.Marker({
    map: myMap,
    position: new google.maps.LatLng({lat, lng})
  })
);

或者您可以跳过预解析并在创建标记时内联进行parseGeo转换：

const parseGeo = str => {
  const [lat, lng] = str.split(':').map(value => parseFloat(value, 10));
  return {
    lat,
    lng
  };
}

const markers = data.map(({latLang}) => (
  new google.maps.Marker({
    map: myMap,
    position: new google.maps.LatLng(parseGeo(latLang))
  })
);