谷歌地图不正确的GeoJSON渲染
Google Maps incorrect GeoJSON rendering
我正在尝试使用Google Maps API在Google Maps上绘制GeoJSON LineString。
我正在获取GeoJSON对象作为AJAX响应，并使用"map.data.addGeoJson（data）"函数在地图上加载GeoJSON响应。
GPS纬度和长点都是从开放街道地图网站上的.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"
}
}
你的坐标是倒过来的。GeoJSON 是[longitude, latitude]，而不是[latitude, longitude]。
请参阅文档中的位置：
"仓位由数字数组表示。必须至少有两个元素，而且可能更多。元素的顺序必须遵循 x、y、z 顺序（投影坐标参考系中坐标的东、北、高度，或地理坐标参考系中坐标的经度、纬度、高度）。
如果我反转坐标，折线出现在德国。
代码片段：
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>相关文章：
- React重新渲染但未显示正确的组件
- React组件等待所需道具进行渲染
- backbone.js无法渲染视图
- Webpack开发服务器和React服务器端渲染
- 在数据提取完成之前进行页面渲染
- 如何临时暂停浏览器渲染，然后恢复整个页面
- 在Highcharts中，我们可以通过任何方式在渲染图表之前获得plotWidth和plotHeight
- Backbone LayoutManager渲染问题
- 我的shareService在angular 2中发送值工作正常，但当我渲染我的另一个组件时，会获得默认值
- 为什么画布形状只在3个画布中的最后一个画布上渲染
- 设置画布渲染器的x和y位置
- 当带有渲染器的DOM元素不在屏幕顶部时，移动了场景的坐标
- 在X轴刻度上渲染HTML
- 在ReactJS中重新渲染孩子3次可以接受吗
- 如何使用传单pip插件与纯GeoJSON数据
- 使用AJAX调用将GeoJSON数据拉入传单
- React路由器服务器端渲染和ajax获取数据
- renderReact/Rect Router+Node/Express.js的服务器端/同构渲染中未定义renderP
- 谷歌地图不正确的GeoJSON渲染
- Geojson渲染问题
