时间戳

首页 > 解决方案 > Google Maps API XML 文件未加载

javascript - Google Maps API XML 文件未加载

问题描述

我一直在尝试将 XML 文件中的标记加载到 Google 地图页面中，类似于此处详述的示例。

我复制了页面上的代码，而是插入了我的 API 密钥，它运行良好。

 // Change this depending on the name of your PHP or XML file
      downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName('marker');
        Array.prototype.forEach.call(markers, function(markerElem) {
          var id = markerElem.getAttribute('id');
          var name = markerElem.getAttribute('name');
          var address = markerElem.getAttribute('address');
          var type = markerElem.getAttribute('type');
          var point = new google.maps.LatLng(
              parseFloat(markerElem.getAttribute('lat')),
              parseFloat(markerElem.getAttribute('lng')));

但是，当使用本地 XML 文件时，我无法让标记出现。我什至从上面的示例中下载了 mapmarkers2 xml 文件，并将其保存在本地。这个版本也没有运行，但是当我切换到使用在线托管的同一个文件时，它工作正常。我尝试将文件托管在 AWS 服务器上，但也没有用。

标签： javascriptphphtmlxmlgoogle-maps-api-3

解决方案

downloadURL您可能希望考虑使用api，而不是使用w3schools 的fetchapi，尤其是在您需要协商 CORS 请求的情况下。在下面的代码中，XML 文件只是存储在与 HTML 页面相同的目录中，并且使用fetch. 然而奇怪的是，这个旨在替换滥用的 XMLHttpRequest 的新 API 没有用于直接返回 XML 数据的本机方法，因此需要一个额外的步骤，即DOMParser在进一步处理之前解析响应数据。

<!doctype html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Google Maps: read XML file...</title>
        <style>
            #map{
                width:800px;
                height:600px;
                float:none;
                margin:auto;
            }
        </style>
        <script>
            function initMap(){
                var map;
                
                const addmarker=( latlng, title, config={} )=>{
                    let options={
                        position:latlng,
                        title:title,
                        map:map
                    };
                    options=Object.assign( options, config );
                    
                    let marker=new google.maps.Marker( options );
                    
                    google.maps.event.addListener( marker, 'click', function(e){
                        console.info( this )
                    }.bind( marker ));
                    
                    return marker;
                };
                
                const attrib=(n,a)=>{
                    return n.getAttribute(a);
                };
                
                
                fetch( 'mapmarkers2.xml' )
                    .then( r=>{ return r.text() })
                    .then( str => ( new window.DOMParser() ).parseFromString( str, 'text/xml' ) )
                    .then( xml=>{
                        let col=xml.documentElement.getElementsByTagName('marker');
                        
                        let options = {
                            zoom: 12,
                            center: new google.maps.LatLng( -33.853985, 151.099404 ),
                        };
                        map = new google.maps.Map( document.getElementById('map'), options );
                        
                        Array.from( col ).forEach( mkr=>{
                            let id=attrib(mkr,'id');
                            let name=attrib(mkr,'name');
                            let address=attrib(mkr,'address');
                            let type=attrib(mkr,'type');
                            let lat=attrib(mkr,'lat');
                            let lng=attrib(mkr,'lng');

                            let config={
                                'id':id,
                                'name':name,
                                'address':address,
                                'type':type
                            };
                            
                            addmarker( new google.maps.LatLng(lat,lng), name, config  );
                        });
                    })
            }
        </script>
        <script async defer src='//maps.googleapis.com/maps/api/js?key=XXXYYYZZZ&callback=initMap'></script>
    </head>
    <body>
        <div id='map'></div>
    </body>
</html>

推荐阅读