访问 Google 地图中的 KML 标记答案

【问题标题】：Access KML Markers in Google Maps访问 Google 地图中的 KML 标记
【发布时间】：2011-04-22 13:22:15
【问题描述】：

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

我正在使用类似这样的方式在地图上加载标记：

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

到目前为止，这很有效，但是我如何获取这些数据并循环遍历这些点？

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

【问题讨论】：

标签： google-maps google-maps-api-3 kml

【解决方案1】：

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

以下是关于如何处理 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>

【讨论】：

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

【解决方案2】：

这是不可能的。检查文档： http://code.google.com/apis/maps/documentation/javascript/overlays.html#KMLLayers

在“KML 特征数据”下：

由于 KML 可能包含大量要素，因此您可能无法直接从 KmlLayer 对象访问要素数据。相反，在显示要素时，它们会呈现为看起来像可点击的 Maps API 叠加层。

【讨论】：