从 JSON 解析纬度和经度

Question

我有一个 JSON 文件，其中的经纬度格式不正确，无法为地图标记调用位置 {lat, lng}。

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

虽然我运气不好。它进来像 "latLang": "27.8247427:-82.75040159999999"

这里有一个link到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

乍一看，我认为您运行遇到的问题可能是您传递的是两个字符串而不是具有数字 [=13 的对象=] 和 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, e.g.
// "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))
  })
);

从 JSON 解析纬度和经度

Parsing lat and long from JSON

javascript

json

geocoding