从 JSON 解析 lat 和 long

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