使用 Google Maps API 从 JSON 文件显示多边形答案

【问题标题】：Displaying polygons from JSON file with Google Maps API使用 Google Maps API 从 JSON 文件显示多边形
【发布时间】：2013-03-22 20:25:36
【问题描述】：

我能够将 JSON 文件加载到页面中（当前使用 jQuery），并将内容设置为页面中的变量。

JSON 包含对建筑轮廓的引用，如下所示；

[
    {
        "buildingNumber":"7",
        "buildingDescription":"Building Seven",
        "spatial":{
            "points":
                [
                    "-1.2345678,50.9876543",
                    "-1.2345677,50.9876544",
                    "-1.2345676,50.9876545",
                    "-1.2345675,50.9876546"
                ]
        }
    }
]

使用 jQuery 的 $.each，我可以加载变量并遍历建筑物，此外，每个建筑物，我可以非常简单地遍历点。

问题在于 Google 似乎只记录了以下描述多边形的方法；

var triangleCoords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737)
];

这是有道理的，但我不知道如何从我目前拥有的数组中获取这种格式。我真的很感激任何关于从哪里开始从一个移动到另一个的指针，或者描述多边形的另一种方式。

我查看了 array.push() 函数，虽然它看起来像是本地化的方式，但我看不出如何根据数组中的迭代值动态创建变量。

谢谢

【问题讨论】：

标签： javascript jquery json google-maps google-maps-api-3

【解决方案1】：

目前您的积分是字符串。将它们转换为 google.maps.LatLng 对象：

var point = "-1.2345678,50.9876543";
var coords = point.split(",");
var pt = new google.maps.LatLng(parseFloat(coords[0]), 
                                parseFloat(coords[1]));

然后将生成的 google.maps.LatLng 对象推送到多边形的“路径”数组中。

【讨论】：

【解决方案2】：

你有一个表示纬度和经度的字符串数组，你需要一个google.maps.LatLng 的数组。我会使用 array.map() 函数 - docs here。

var polyCoords = spatial.points.map(function(point) {
    var pointCoords = point.split(',');
    return new google.maps.LatLng(
        parseFloat(pointCoords[0]),
        parseFloat(pointCoords[1]));
});

【讨论】：