JavaScript と xml ファイルを使用して、Google マップに 700 の住所をプロットしています。
したがって、この JavaScript 関数は 300 番地まで正常に機能し、住所をマップに正しくプロットしていますが、その後は速度が低下し、html ページがハングします。それで、Googleマップにすべての住所をプロットするためのより良い解決策を提供できますか.
これは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 コンテンツを読み込んでアドレスの配列に追加する関数を 1 つ作成しました。ここでは、合計 675 のアドレスを取得し、Google マップ関数に 1 つずつ渡しています。そのための 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>