Question

我有这个JSON字符串：

"[{"lat":"42.021631","lng":"-93.624239"},{"lat":"19.112049","lng":"72.870234"}]"

我需要这种格式才能使用谷歌地图进行绘图：

var flightPlanCoordinates = [
      {lat: 37.772, lng: -122.214},
      {lat: 21.291, lng: -157.821},
      {lat: -18.142, lng: 178.431},
      {lat: -27.467, lng: 153.027}
    ];

如何以格式获取此内容？在使用Papa Parse导入CSV并删除JSON文本中的引号后，我收到了我的字符串。任何帮助将不胜感激。

Answer 1

JSON.parse(<json string variable>)将返回一个可以传递到谷歌地图的JS对象。

但是：您的JSON无效："[{lat:42.021631,lng:-93.624239},{lat:19.112049,lng:72.870234}]"。 lat和lngs应该用双引号括起来。

Answer 2

您的字符串不是json格式，因此您首先将其转换为json格式。

＆＃13;

let str = "[{lat:42.021631,lng:-93.624239},{lat:19.112049,lng:72.870234}]";
let jsonStr = str.replace(/(lat|lng)/g, '"' + "$1" + '"');
let json = JSON.parse(jsonStr);
console.log(json);

＆＃13;

Answer 3

JSON.parse将JSON字符串转换为javascript对象。如果你保留引号，那么它是有效的JSON：

'[{"lat":42.021631,"lng":-93.624239},{"lat":19.112049,"lng":72.870234}]'

这将创建折线：

var path = JSON.parse('[{"lat":42.021631,"lng":-93.624239},{"lat":19.112049,"lng":72.870234}]');
console.log(path);
var polyline = new google.maps.Polyline({
  map: map,
  path: path
});

代码段

＆＃13;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(0, 0),
      zoom: 1,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var path = JSON.parse('[{"lat":42.021631,"lng":-93.624239},{"lat":19.112049,"lng":72.870234}]');
  var polyline = new google.maps.Polyline({
    map: map,
    path: path
  });
}
google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

＆＃13;

Answer 4

这不是有效的JSON。如果字符串来自受信任的来源，则可以使用eval。

var result = eval([{lat:42.021631,lng:-93.624239},{lat:19.112049,lng:72.870234}])

将返回

[Object, Object]

Answer 5

最简单的方法是eval。

var str = "[{lat:42.021631,lng:-93.624239},{lat:19.112049,lng:72.870234}]";
eval(str);

Answer 6

你应该试着保留报价......

x = "[{lat:42.021631,lng:-93.624239},{lat:19.112049,lng:0},{lat:42.112049,lng:0}]".split("},{");
var regex = /[+-]?\d+(\.\d+)?/g;

flightPlanCoordinates = [];
for (var i=0; i<x.length; i++) {
  coords = x[i].match(regex).map(function(v) { return parseFloat(v); });

  if (coords.length === 2) {
        flightPlanCoordinates.push({ "lat": coords[0], "lng": coords[1] });
  }
}

console.log(flightPlanCoordinates);

Kris Roofe的回答非常好。

Answer 7

鉴于您的问题的最新更新，此处的真正问题是JSON数据中的lat和lng值是字符串而不是数字。

换句话说，您的JSON数据看起来像这样（为了清晰起见，添加了空格）：

[
    { "lat": "42.021631", "lng": "-93.624239" },
    { "lat": "19.112049", "lng": "72.870234" }
]

它应该是这样的：

[
    { "lat": 42.021631, "lng": -93.624239 },
    { "lat": 19.112049, "lng": 72.870234 }
]

解决此问题的最佳方法是更改服务器代码以生成第二种格式而不是第一种格式。我无法提供具体信息，因为我不知道您使用的是哪种服务器语言或库。但是，如果您可以让服务器生成lat和lng值作为数字而不是字符串，那么一切都会变得更容易。

如果无法完成，那么解决方案就无法使用JSON文本，删除引号或将其添加回正则表达式。这只是造成你不需要而且对你没有帮助的混乱。

相反，只需将lat和lng值转换为您需要的数字。

例如，如果您在名为location的变量中拥有JSON数组的第一个元素，则可能会尝试从中创建LatLng对象：

var latlng = new google.maps.LatLng( location.lat, location.lng );

这可能不起作用，因为location.lat和location.lng是字符串，而不是数字。但您可以轻松地将它们转换为数字：

var latlng = new google.maps.LatLng( +location.lat, +location.lng );

将字符串转换为数字有多种方法，但是一元+运算符最简洁。

+运算符如何工作？它不是Google地图或LatLng对象或类似内容所特有的。它只是一个JavaScript运算符。如果您将+运算符应用于已经是数字的运算符，那么它就不会单独使用。但是，如果您将+应用于字符串，则会将其转换为数字。

或者，您可以使用parseFloat函数：

var latlng = new google.maps.LatLng(
    parseFloat(location.lat),
    parseFloat(location.lng)
);

如果你发现它更清楚，那就没问题了，但试试+操作员：一旦你习惯了它，你可能会发现你喜欢它。

同样，最好的解决方案是修复服务器代码以生成正确的JSON数字，如上所示。

Answer 8

您需要在JSON文本中保留引号并运行以下行：

var flightPlanCoordinates = JSON.parse('[{"lat":"42.021631","lng":"-93.624239"},{"lat":"19.112049","lng":"72.870234"}]')

将JSON拆分为多个变量/数组

8 个答案: