【问题标题】:Trouble pushing Lat/Lng to array for polygon - Google Maps无法将 Lat/Lng 推送到多边形数组 - Google Maps
【发布时间】:2024-05-29 12:55:01
【问题描述】:

我正在尝试使用多边形来勾勒城市中的区域。我正在从 kml 文件中提取 lat/lng。问题是,当我将新的 google.maps.LatLng(lat,lng) 推送到数组时,值会发生变化,如下所示:

 [R { k=-90, B=37.74811199999999, toString=function(), more...}, R { k=-90, B=37.74840500000005, toString=function(), more...}, R { k=-90, B=37.74885900000004, toString=function(), more...}, R { k=-90, B=37.74871800000005, toString=function(), more...}, R { k=-90, B=37.74845099999993, toString=function(), more...}, R { k=-90, B=37.74811199999999, toString=function(), more...}, R { k=-90, B=37.74499100000003, toString=function(), more...}, R { k=-90, B=37.74434999999994, toString=function(), more...}, R { k=-90, B=37.74332800000002, toString=function(), more...}, R { k=-90, B=37.74282100000005, toString=function(), more...}, R { k=-90, B=37.741840000000025, toString=function(), more...}, R { k=-90, B=37.74077999999997, toString=function(), more...}, R { k=-90, B=37.73960099999999, toString=function(), more...}, R { k=-90, B=37.73775899999998, toString=function(), more...}, R { k=-90, B=37.73704900000007, toString=function(), more...}, R { k=-90, B=37.736580000000004, toString=function(), more...}, R { k=-90, B=37.73606900000004, toString=function(), more...}, R { k=-90, B=37.734909000000016, toString=function(), more...}, R { k=-90, B=37.73410000000001, toString=function(), more...}, R { k=-90, B=37.73358899999994, toString=function(), more...}, R { k=-90, B=37.73257100000001, toString=function(), more...}, R { k=-90, B=37.732230999999956, toString=function(), more...}, R { k=-90, B=37.732230999999956, toString=function(), more...}, R { k=-90, B=37.732058999999936, toString=function(), more...}, R { k=-90, B=37.73168899999996, toString=function(), more...}, R { k=-90, B=37.73168899999996, toString=function(), more...}, R { k=-90, B=37.73247100000003, toString=function(), more...}, R { k=-90, B=37.73239899999999, toString=function(), more...}, R { k=-90, B=37.732058999999936, toString=function(), more...}, R { k=-90, B=37.731547999999975, toString=function(), more...}, R { k=-90, B=37.731788999999935, toString=function(), more...}, R { k=-90, B=37.73481000000004, toString=function(), more...}, R { k=-90, B=37.73623999999995, toString=function(), more...}, R { k=-90, B=37.737869000000046, toString=function(), more...}, R { k=-90, B=37.73915099999999, toString=function(), more...}, R { k=-90, B=37.74261899999999, toString=function(), more...}, R { k=-90, B=37.74811199999999, toString=function(), more...}]

在下面查看我的代码块。

  var districts = [];   
  var mapped_districts = []; 
  var map = {};



    function drawBorders(){

    $.ajax({
      type: "GET",
      url: "districts.kml",
      dataType: "xml",
      success: districtsToArrayAndMap
     });

      function districtsToArrayAndMap(xml) {



        // $(xml).find("Placemark").each(function () {
        // console.log($(this))
        //console.log($(this).find("name").text())
        //console.log($(this).find("coordinates").text())

        function map_districts(){
          for (var i=0; i<districts.length; i++){

             var coords = districts[i]["coords"];
             //console.log(coords);
             var coord_string = coords.split(" "); 
             var points = [];

             for (var c=0; c<coord_string.length-1; c++){
                var c1 = coord_string[c].split(",");                    
                var lat1 = Number(c1[0]);
                var lng1 = Number(c1[1]);
                //console.log(typeof lat + lat);
                //var point = "new google.maps.LatLng("+lat+","+lng+")";
                points.push(new google.maps.LatLng(lat1, lng1));
             }

             districts[i]["points"] = points; 
            //console.log(districts[i]["name"] + districts[i]["points"])
            var pointsArray = districts[i]["points"];
            console.log(pointsArray);

             mapped_districts[i] = new google.maps.Polygon({
               paths: pointsArray,
               strokeColor: '#FF0000',
               strokeOpacity: 0.8,
               strokeWeight: 2,
               fillColor: '#FF0000',
               fillOpacity: 0.35
              });

           mapped_districts[i].setMap(map);

          }
        };

        $(xml).find("Placemark").each(function(index, value){
           //get coordinates and place name
          name = $(this).find("name").text();
          coords = $(this).find("coordinates").text();
          districts.push({
               "name": name,
               "coords": coords
          });
        });
    // });
        //console.log(districts);
        map_districts();
      };
    };

【问题讨论】:

  • 最可能的问题是kml使用的坐标顺序是经度,纬度;不是纬度,是经度
  • 你我的朋友……真是个天才!天哪!!!!我不敢相信!!!

标签: javascript google-maps push polygon


【解决方案1】:

这是不正确的:

        for (var c=0; c<coord_string.length-1; c++){
            var c1 = coord_string[c].split(",");                    
            var lat1 = Number(c1[0]);
            var lng1 = Number(c1[1]);
            //console.log(typeof lat + lat);
            //var point = "new google.maps.LatLng("+lat+","+lng+")";
            points.push(new google.maps.LatLng(lat1, lng1));

KML 坐标的顺序为longitude,latitude。应该是:

        for (var c=0; c<coord_string.length-1; c++){
            var c1 = coord_string[c].split(",");                    
            var lat1 = Number(c1[1]);
            var lng1 = Number(c1[0]);
            //console.log(typeof lat + lat);
            //var point = "new google.maps.LatLng("+lat+","+lng+")";
            points.push(new google.maps.LatLng(lat1, lng1));

【讨论】:

    相关资源