gpt4 book ai didi

javascript - 尝试使用 GeoJSON 在谷歌地图上绘制标记

转载 作者:行者123 更新时间:2023-11-28 18:57:50 24 4
gpt4 key购买 nike

我正在尝试使用“geojson”为给定的输入坐标在“google map ”上打印标记。下面附有 JSON 文件。

{
"type": "FeatureCollection",
"features":[{
"type":"Feature",
"geometry":
{
"type":"Point",
"coordinates":[-117.7431667,35.9595,0.01]
}
}
]

我的具体问题是我在“坐标”部分中有 3 个参数。我引用了几个示例,其中“坐标”有两个参数。

var map;
function initialize() {
map = new google.maps.Map(document.getElementById('mapDisplay'), {
zoom: 8,
center: new google.maps.LatLng(44.5403, -78.5463),
mapTypeId: google.maps.MapTypeId.ROADMAP

});

$("#button3").click(function(){

$.get("http://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2015-10-14&endtime=2015-10-21",
function(data,status){
console.info("test");
$.each(data.features, function (i, obj) {
$.each(obj.geometry, function (ind, obj) {
if(ind=="coordinates")
console.log("key:" + ind + " value:" + obj);
var coords = obj;
var latLng = new google.maps.LatLng(coords[2],coords[1],coords[0]);
var marker = new google.maps.Marker
({
position: latLng,
icon: iconBase + 'schools_maps.png',

map: map

});


});
});
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
});
</script>
<body>
<div id="mapDisplay">
</div>
<div id="button_Display">
<button id="button1">Sesimic Events last week</button>
</div>
<div id="Sesimic_Events">
<button id="button2">Places affected</button>
</div>
<div id="markers">
<button id="button3">GoogleMarkers</button>
</div>
<div id="result">
</div>

任何帮助将不胜感激。下面附上我运行“googlemarkers”按钮 Console.logs while running google markers button 时得到的输出屏幕截图

最佳答案

我认为你使这项任务过于复杂化了。在此处阅读有关 GeoJSON 详细格式的信息 -> http://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson_detail.php

JSON 响应的 features 部分的每一项始终采用以下格式:

{
type: "Feature",
properties: {
//a LOT of properties ...
},
geometry: {
type: "Point",
coordinates: [
longitude, //<-- you need this
latitude, //<-- and this
depth
]
},
id: String
}

因此绘制地震标记非常简单:

$.get("http://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2015-10-14&endtime=2015-10-21",            function(data,status){
var latLng, marker;
$.each(data.features, function(i, obj) {
latLng = new google.maps.LatLng(
parseFloat(obj.geometry.coordinates[1]),
parseFloat(obj.geometry.coordinates[0])
)
marker = new google.maps.Marker({
position: latLng,
map: map
})
})
})

您的代码已简化并可在此处工作 -> http://jsfiddle.net/9p9pk3je/

关于javascript - 尝试使用 GeoJSON 在谷歌地图上绘制标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33274429/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com