Google maps 在谷歌地图中访问KML标记_Google Maps_Google Maps Api 3_Kml

Google maps 在谷歌地图中访问KML标记

google-maps google-maps-api-3

Google maps 在谷歌地图中访问KML标记,google-maps,google-maps-api-3,kml,Google Maps,Google Maps Api 3,Kml,使用谷歌地图API时，有没有办法从KML文件创建“侧栏” 我正在使用如下方式将标记加载到地图上： var myMarkerLayer = new google.maps.KmlLayer('http://example.com/WestCoast.kml'); 到目前为止，这非常有效，但是我如何获取数据并循环通过这些点呢如果可能的话，我希望避免使用第三方库——尽管jQuery是可以的。这是不可能的。检查文档：在“KML要素数据”下：由于KML可能包含大量要素，因此您可能无法直接从Kml

使用谷歌地图API时，有没有办法从KML文件创建“侧栏”

我正在使用如下方式将标记加载到地图上：

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

到目前为止，这非常有效，但是我如何获取数据并循环通过这些点呢

如果可能的话，我希望避免使用第三方库——尽管jQuery是可以的。

这是不可能的。检查文档：

在“KML要素数据”下：

由于KML可能包含大量要素，因此您可能无法直接从KmlLayer对象访问要素数据。相反，当功能显示时，它们将被渲染为类似于可单击的地图API覆盖

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

下面是一个关于如何处理KML文件以及如何根据文件中的数据实现导航的示例。需要注意的是，对于大型KML文件，我不会这样做，因为它会使加载时间加倍（浏览器必须加载文件才能处理功能）


var映射；
var-nav=[]；
$（文档）.ready（函数（）{
//初始化地图
init（）；
$.get（“kml.xml”，函数（数据）{
html=“”；
//循环遍历placemarks标记
$（数据）。查找（“Placemark”）。每个（函数（索引、值）{
//获取坐标和地名
coords=$（this.find（“坐标”）.text（）；
place=$（this.find（“name”）.text（）；
//存储为JSON
c=坐标拆分（“，”）
导航推力({
“地点”：地点，
“lat”：c[0]，
“液化天然气”：c[1]
})
//作为导航输出
html+=“”+place+“”；
})
//作为导航输出
$（“.navigation”）.append（html）；
//绑定在导航上的单击以滚动到placemark
$（“.navigation li”）.bind（“单击”，函数（）{
panToPoint=new google.maps.LatLng（导航[$（this.index（）]）.lng，导航[$（this.index（）]）.lat）
panTo地图（panToPoint）；
})
});
函数init（）{
var latlng=新的google.maps.latlng（-43.552965172.47315）；
变量myOptions={
缩放：10，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=新的google.maps.map（document.getElementById（“map”），myOptions）；
}
})

由于跨域安全限制，此方法将要求kml文件与地图页存在于同一域中。然而，使用本机google maps Kmlayer将允许加载外部KML。请注意，此方法只是解决了本机Kmlayer的缺点，它没有为您提供从KML获取额外数据的任何选项。这并不能替代此方法，这只是一种处理XML文档的方法。您好，我知道这个问题很老，但在使用这种方法从kml文件中获取数据之后，我注意到它给了我一个错误。导航未定义；因此，您需要添加var nav=[]；在使用nav变量之前。

<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>