javascript - 谷歌地图不正确的 GeoJSON 渲染

Question

我正在尝试使用 Google Maps API 在 Google Maps 上绘制 GeoJSON LineString。

我正在获取 GeoJSON 对象作为 AJAX 响应，并使用“map.data.addGeoJson(data)”函数在 map 上加载 GeoJSON 响应。

GPS 纬度和经度点都已从 Open Street Maps 网站的 .gpx 文件中提取出来，然后放入数据库中。然后将它们编译成 GeoJSON 格式，然后发送到网站。

个别点都在德国，但轨迹是在索马里附近渲染的。

谁能帮帮我？

包含AJAX请求的initMap函数如下:

       function initMap() {

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: {lat: 53.44620230866472, lng: 9.666813185187198},
      mapTypeId: google.maps.MapTypeId.TERRAIN,
    });


    $.ajax({
    url: 'http://ADDRESS TO SERVER/api/geodata/getLineString',
    data: {"usrid":3,"startd":"2016-04-17","endd":"2016-04-18"},
    type: 'POST',
    success: function (response) {
    map.data.addGeoJson(response);
        },
    error: function () {
        alert("error");
    },
});
  }

整个 GeoJSON 响应如下:

      {
  "type": "Feature",
  "geometry": {
    "type": "LineString",
    "coordinates": [
      [
        51.731921404763426,
        14.342405595236764
      ],
      [
        51.731914999999994,
        14.342412
      ],
      [
        51.73192399392278,
        14.342408729482642
      ],
      [
        51.73193,
        14.342416000000004
      ],
      [
        51.731934,
        14.342417000000001
      ],
      [
        51.73193,
        14.342411999999998
      ],
      [
        51.731926,
        14.342408
      ],
      [
        51.73192399392278,
        14.342408729482642
      ],
      [
        51.731921404763426,
        14.342405595236764
      ],
      [
        51.73199100000001,
        14.34214
      ],
      [
        51.73198299999999,
        14.342144
      ],
      [
        51.731987,
        14.342298000000001
      ],
      [
        51.731983,
        14.342302000000002
      ],
      [
        51.731983,
        14.342303999999999
      ],
      [
        51.73199100000001,
        14.342310000000001
      ],
      [
        51.731995000000005,
        14.342308
      ],
      [
        51.731998,
        14.342317
      ],
      [
        51.731999943503226,
        14.34232428813586
      ],
      [
        51.732002,
        14.342319000000002
      ],
      [
        51.732006000000005,
        14.342308000000003
      ],
      [
        51.732009999999995,
        14.342290999999996
      ],
      [
        51.73201799999999,
        14.342276
      ],
      [
        51.732025,
        14.342262999999999
      ],
      [
        51.732025,
        14.342252999999998
      ],
      [
        51.732032999999994,
        14.342243
      ],
      [
        51.732032999999994,
        14.342237000000003
      ],
      [
        51.73202500000001,
        14.342224000000002
      ],
      [
        51.73201799999999,
        14.342204999999996
      ],
      [
        51.73201,
        14.342184999999999
      ],
      [
        51.732002,
        14.342166
      ],
      [
        51.731995000000005,
        14.342153
      ],
      [
        51.731995000000005,
        14.342149000000001
      ],
      [
        51.73199100000001,
        14.34214
      ],
      [
        51.731976333334124,
        14.340528000002589
      ],
      [
        51.73196,
        14.340535
      ],
      [
        51.731934,
        14.340549
      ],
      [
        51.73190300000001,
        14.340559
      ],
      [
        51.731873,
        14.340569
      ],
      [
        51.731846000000004,
        14.340582
      ],
      [
        51.731815,
        14.340595
      ],
      [
        51.731789,
        14.340612000000002
      ],
      [
        51.731762,
        14.340625999999999
      ],
      [
        51.73173100000001,
        14.340643
      ],
      [
        51.731705,
        14.340658
      ],
      [
        51.731674,
        14.340673
      ],
      [
        51.731651,
        14.340681999999997
      ],
      [
        51.731621,
        14.340693
      ],
      [
        51.73160200000001,
        14.340705999999997
      ],
      [
        51.731586,
        14.340723
      ],
      [
        51.731567,
        14.340734000000003
      ],
      [
        51.731548,
        14.340740000000002
      ],
      [
        51.73153299999999,
        14.340748999999999
      ],
      [
        51.731514,
        14.340759
      ],
      [
        51.731495,
        14.340764000000002
      ],
      [
        51.731476,
        14.340768
      ],
      [
        51.731472,
        14.340768
      ],
      [
        51.731472,
        14.340765999999997
      ],
      [
        51.731468,
        14.340762
      ],
      [
        51.73146799999999,
        14.340772999999999
      ],
      [
        51.731468,
        14.340788
      ],
      [
        51.731472,
        14.340809
      ]
      ]
      },
  "properties": {
    "trajectoryid": "05BC2B9E-7350-4D55-B4BB-026EC0B2E65B",
    "color": "blue"
  }
  }

Answer 1

你的坐标倒过来了。 GeoJSON 是 [longitude, latitude]，而不是 [latitude, longitude]。

参见 positions在文档中:

"A position is represented by an array of numbers. There must be at least two elements, and may be more. The order of elements must follow x, y, z order (easting, northing, altitude for coordinates in a projected coordinate reference system, or longitude, latitude, altitude for coordinates in a geographic coordinate reference system)."

如果我反转坐标，折线出现在德国。

代码片段:

var map;
var bounds = new google.maps.LatLngBounds();

function initMap() {

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {
      lat: 53.44620230866472,
      lng: 9.666813185187198
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN,
  });
  // map.data.addGeoJson(geoJson);
  map.data.addGeoJson(reverseData(geoJson));
}
google.maps.event.addDomListener(window, "load", initMap);

function reverseData(data) {
  for (var i = 0; i < data.geometry.coordinates.length; i++) {
    data.geometry.coordinates[i] = [data.geometry.coordinates[i][1], data.geometry.coordinates[i][0]];
    var mrk = new google.maps.Marker({
      position: {
        lat: data.geometry.coordinates[i][1],
        lng: data.geometry.coordinates[i][0]
      },
      // map: map
    });
    bounds.extend(mrk.getPosition());
  }
  map.fitBounds(bounds);
  return data;
}
var geoJson = {
  "type": "Feature",
  "geometry": {
    "type": "LineString",
    "coordinates": [
      [
        51.731921404763426,
        14.342405595236764
      ],
      [
        51.731914999999994,
        14.342412
      ],
      [
        51.73192399392278,
        14.342408729482642
      ],
      [
        51.73193,
        14.342416000000004
      ],
      [
        51.731934,
        14.342417000000001
      ],
      [
        51.73193,
        14.342411999999998
      ],
      [
        51.731926,
        14.342408
      ],
      [
        51.73192399392278,
        14.342408729482642
      ],
      [
        51.731921404763426,
        14.342405595236764
      ],
      [
        51.73199100000001,
        14.34214
      ],
      [
        51.73198299999999,
        14.342144
      ],
      [
        51.731987,
        14.342298000000001
      ],
      [
        51.731983,
        14.342302000000002
      ],
      [
        51.731983,
        14.342303999999999
      ],
      [
        51.73199100000001,
        14.342310000000001
      ],
      [
        51.731995000000005,
        14.342308
      ],
      [
        51.731998,
        14.342317
      ],
      [
        51.731999943503226,
        14.34232428813586
      ],
      [
        51.732002,
        14.342319000000002
      ],
      [
        51.732006000000005,
        14.342308000000003
      ],
      [
        51.732009999999995,
        14.342290999999996
      ],
      [
        51.73201799999999,
        14.342276
      ],
      [
        51.732025,
        14.342262999999999
      ],
      [
        51.732025,
        14.342252999999998
      ],
      [
        51.732032999999994,
        14.342243
      ],
      [
        51.732032999999994,
        14.342237000000003
      ],
      [
        51.73202500000001,
        14.342224000000002
      ],
      [
        51.73201799999999,
        14.342204999999996
      ],
      [
        51.73201,
        14.342184999999999
      ],
      [
        51.732002,
        14.342166
      ],
      [
        51.731995000000005,
        14.342153
      ],
      [
        51.731995000000005,
        14.342149000000001
      ],
      [
        51.73199100000001,
        14.34214
      ],
      [
        51.731976333334124,
        14.340528000002589
      ],
      [
        51.73196,
        14.340535
      ],
      [
        51.731934,
        14.340549
      ],
      [
        51.73190300000001,
        14.340559
      ],
      [
        51.731873,
        14.340569
      ],
      [
        51.731846000000004,
        14.340582
      ],
      [
        51.731815,
        14.340595
      ],
      [
        51.731789,
        14.340612000000002
      ],
      [
        51.731762,
        14.340625999999999
      ],
      [
        51.73173100000001,
        14.340643
      ],
      [
        51.731705,
        14.340658
      ],
      [
        51.731674,
        14.340673
      ],
      [
        51.731651,
        14.340681999999997
      ],
      [
        51.731621,
        14.340693
      ],
      [
        51.73160200000001,
        14.340705999999997
      ],
      [
        51.731586,
        14.340723
      ],
      [
        51.731567,
        14.340734000000003
      ],
      [
        51.731548,
        14.340740000000002
      ],
      [
        51.73153299999999,
        14.340748999999999
      ],
      [
        51.731514,
        14.340759
      ],
      [
        51.731495,
        14.340764000000002
      ],
      [
        51.731476,
        14.340768
      ],
      [
        51.731472,
        14.340768
      ],
      [
        51.731472,
        14.340765999999997
      ],
      [
        51.731468,
        14.340762
      ],
      [
        51.73146799999999,
        14.340772999999999
      ],
      [
        51.731468,
        14.340788
      ],
      [
        51.731472,
        14.340809
      ]
    ]
  },
  "properties": {
    "trajectoryid": "05BC2B9E-7350-4D55-B4BB-026EC0B2E65B",
    "color": "blue"
  }
}

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>