0

我正在使用 JavaScript 和 xml 文件在谷歌地图中绘制 700 个地址。

所以这个 JavaScript 函数在 300 地址之前工作正常，它在地图中正确绘制地址，但之后它会变慢并挂起 html 页面。那么我们能否为我提供更好的解决方案来实现在谷歌地图中绘制所有地址。

这是 xml 示例文件，该文件和文件名中有 675 地址xml1.xml。例如

 <xml><listing>
    <storename>Borges Architectural Group</storename>
    <address>1478 Stone Point Dr # 350 Roseville CA 95661-2876 Placer</address>
    <person>OWNER Lane Borges</person>
    <phone>9167827200</phone>
    <web>www.borgesarch.com</web>
    <source>Infogroup</source>
    </listing>
    <listing>
    <storename>Carrier Johnson   Culture</storename>
    <address>1301 3rd Ave San Diego CA 92101-4012 San Diego</address>
    <person>PRESIDENT Michael C Johnson</person>
    <phone>6192392353</phone>
    <web>www.carrierjohnson.com</web>
    <source>Infogroup</source>
    </listing>
    </xml>

所以我正在用 JavaScript 读取这个文件，为此我创建了一个函数来读取 xml 内容并将其添加到地址数组中，所以在这里我得到了总共 675 个地址，并且我将一一传递给谷歌地图函数。所以这里是 JavaScript。

<script type="text/javascript">  
    var addresses=new Array(); 
    var info=new Array();
    var infowindow = new google.maps.InfoWindow();
    var latlng = new google.maps.LatLng(27.8333,-81.7170);
    var mapOptions = {
        zoom: 4,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
    var geo = new google.maps.Geocoder(); 
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    var bounds = new google.maps.LatLngBounds(); 

    function getAddress(search,info1, next) {
        geo.geocode({address:search}, function (results,status){            
            if (status == google.maps.GeocoderStatus.OK) {             
              var p = results[0].geometry.location;
              var lat=p.lat();
              var lng=p.lng();            
              var msg = 'address="' + search + '" lat=' +lat+ ' lng=' +lng+ ' <br>'; 
              createMarker(search +"<br/>"+ info1,lat,lng);
            }          
            else{             
              if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
                nextAddress--; 
              }else {
                var reason="Code "+status;
                var msg = 'address="' + search + '" error=' +reason+ ' <br>'; 
              }   
            }
            next();
          }
        );
      }

     function createMarker(add,lat,lng) {
       var contentString = add;
       var marker = new google.maps.Marker({
         position: new google.maps.LatLng(lat,lng),
         map: map,
         zIndex: Math.round(latlng.lat()*-100000)<<5
       });

      google.maps.event.addListener(marker, 'click', function() {
         infowindow.setContent(contentString); 
         infowindow.open(map,marker);
       });
       bounds.extend(marker.position);
     }

    function callajax(){
        downloadUrl('xml1.xml',function (listings_data){
        listings_data = xmlParse(listings_data);
        var markers = listings_data.documentElement.getElementsByTagName('listing');       
        for (var i = 0; i < markers.length; i++)
        {
           var web;
           var storename= markers[i].getElementsByTagName('storename')[0].firstChild.data;
           addresses[i]= storename + " <br />" + markers[i].getElementsByTagName('address')[0].firstChild.data;
           var perosn= markers[i].getElementsByTagName('person')[0].firstChild.data;
           var phone= markers[i].getElementsByTagName('phone')[0].firstChild.data;
           var source=markers[i].getElementsByTagName('source')[0].firstChild.data;          
           if (typeof  markers[i].getElementsByTagName('web')[0] ==  "undefined")
                web='';
           else 
                web=markers[i].getElementsByTagName('web')[0].firstChild.data; 

           info[i]= perosn + " <br />"+ phone + " <br />"+ web +" <br />"+  source;
        }});
    }
    var nextAddress = 0;
    function theNext() {       
        if (nextAddress < addresses.length) {
          setTimeout('getAddress("'+addresses[nextAddress]+'","'+info[nextAddress]+'",theNext)',1  );
          nextAddress++;
        } else {  
          map.fitBounds(bounds);
        }
      } 

    function timeout_init() {
        setTimeout('theNext()', 3000);
    }

     callajax();
     timeout_init();
    </script>
4

1 回答 1

0

不要对客户端中的地址进行地理编码。这是一项服务器密集型操作，并受到配额和速率限制。

如果您希望对静态已知地址进行地理编码，请参阅地理编码 Web 服务文档。

使用网络服务（或其他方式）离线对您的地址进行地理编码，并使用生成的坐标来显示您的地图。

于 2013-02-11T13:41:26.990 回答