如何在 Google Maps V3 上从 JSON 绘制多边形数组

Question

我有一个包含多边形数组的 JSON 字符串。您能否告诉我如何更新以下代码以循环和解析来自此 WebAPI（JSON）的多边形。您可以找到多边形的坐标到“周长” - http://track.asiacom.co.th/fmswebapi/api/zoneinfo

这是我的代码

var url = 'http://track.asiacom.co.th/fmswebapi/api/zoneinfo';

$.getJSON(url, function (zones) {


    for (var i = 0; i < zones.length; i++) {

        var zone = zones[i];
        var name = zone.Name;
        var type = zone.Type;
        var perimeter = zone.Perimeter;
        var company = zone.Company;
        var color = zone.Color;


        var coords = perimeter.split(",");


        pathCoordinates.push(new google.maps.LatLng(parseFloat(coords[0]), parseFloat(coords[1])));


        // Construct the polygon.
        polygon = new google.maps.Polygon({
            path: pathCoordinates,
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 3,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            map: map
        });


        polygon.setMap(map);




        // Add a listener for the click event.
        google.maps.event.addListener(polygon, 'click', showArrays);

        infoWindow = new google.maps.InfoWindow();



        // Click Zones
        google.maps.event.addListener(polygon, 'click', (function (polygon, i) {

            return function () {

                map.panTo(this.position);

            }

        })(polygon, i));

    }

    return zones;

}

)

Answer 1

你真的有必要使用json字符串还是只是一个例子？如果不是示例，当另一位顾客出现在外围时，您的应用程序将失败......无论如何我画了，（你有一个 Polygono 只有 2 分）。

编辑：JSBin

$(function () {
initialize();
});
    var url = 'http://track.asiacom.co.th/fmswebapi/api/zoneinfo';
    var pathCoordinates = [];
    var map;

  function initialize() {
      map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 2,
      center: new google.maps.LatLng(12.473727562827564, 180.55709464999995),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      disableDefaultUI: true,
      zoomControl: true
    });
  }




$.getJSON(url, function (zones) {
console.log(zones);

for (var i = 0; i < zones.length; i++) {

    var zone = zones[i];
    var name = zone.Name;
    var type = zone.Type;
    var perimeter = zone.Perimeter;
    var company = zone.Company;
    var color = zone.Color;


    var coords = perimeter.split(" ");
    var recoords;
    for (var k = 0; k < coords.length; k++) {
          recoords = coords[k].split(",");
          pathCoordinates.push(new google.maps.LatLng(parseFloat(recoords[0]), parseFloat(recoords[1])));
    };



    // Construct the polygon.
    polygon = new google.maps.Polygon({
        path: pathCoordinates,
        strokeColor: color,
        strokeOpacity: 0.8,
        strokeWeight: 3,
        fillColor: color,
        fillOpacity: 0.35,
        Company: company,
        Name: name,
        map: map
    });

    pathCoordinates = [];
}

    polygon.setMap(map);

});

如果您不使用此模式获取 lat / lng 并使用 c# 或 java 看这个线程 Return object(markers,polygon,polyline) to javascript from C#

对不起我的英语;)