gpt4 book ai didi

google-maps - 在 Google map 中访问 KML 标记

转载 作者:行者123 更新时间:2023-12-03 19:34:43 27 4
gpt4 key购买 nike

使用 Google Maps API 时,有什么方法可以从 KML 文件创建“侧边栏”?

我正在使用这样的东西在 map 上加载标记:

var myMarkerLayer = new google.maps.KmlLayer('http://example.com/WestCoast.kml');

到目前为止,这很有效,但是我如何获取该数据并遍历这些点?

如果可能的话,我想避免使用第三方库 - 尽管 jQuery 没问题。

最佳答案

KML 只是一个 XML 文档,因此您可以使用 jQuery 处理它以提取您需要的数据。您可以将坐标和地名存储在本地数组中,并将此数据用于您想要的任何目的,例如。当人们单击侧边栏上的地名时,您可以使用它导航到 map 上的某个点。

下面是一个关于如何处理 KML 文件并根据文件中的数据实现导航的示例。一个警告,我不会对大型 KML 文件这样做,因为它会使加载时间加倍(浏览器必须加载文件处理特征)...

<script type="text/javascript" src= "http://maps.google.com/maps/api/js?sensor=false">
</script>
<script src="../js/jquery-1.4.2.min.js">
</script>
<script>
var map;
var nav = [];
$(document).ready(function(){
//initialise a map
init();

$.get("kml.xml", function(data){

html = "";

//loop through placemarks tags
$(data).find("Placemark").each(function(index, value){
//get coordinates and place name
coords = $(this).find("coordinates").text();
place = $(this).find("name").text();
//store as JSON
c = coords.split(",")
nav.push({
"place": place,
"lat": c[0],
"lng": c[1]
})
//output as a navigation
html += "<li>" + place + "</li>";
})
//output as a navigation
$(".navigation").append(html);

//bind clicks on your navigation to scroll to a placemark

$(".navigation li").bind("click", function(){

panToPoint = new google.maps.LatLng(nav[$(this).index()].lng, nav[$(this).index()].lat)

map.panTo(panToPoint);
})

});

function init(){


var latlng = new google.maps.LatLng(-43.552965, 172.47315);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);



}


})
</script>
<html>
<body>
<div id="map" style="width:600px;height: 600px;">
</div>
<ul class="navigation">
</ul>
</body>
</html>

关于google-maps - 在 Google map 中访问 KML 标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3885123/

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