简明现代魔法 -> 软件项目 -> Google Maps 下拉列表刷新侧栏与地图

Google Maps 下拉列表刷新侧栏与地图

2009-12-29

本文章介绍用下拉列表来刷新 Google 地图项目的侧栏与地图，使得用户搜索信息更为及时与便捷。

侧栏创建

select 控件的 onchange() 事件设定为 handleSelected(this)

<div id="rightcol"> 
<div> 
<select onchange="handleSelected(this)"  size="1"  class="drop"> 
<option selected="selected"> - Select an area - </option> 
<option> Ag Nicolias</option> 
<option> Akrotiri</option> 
<option> Apokoronas </option> 
<option> Hersonisos </option> 
<option> Kastelli </option> 
<option> Kolimbari </option> 
<option> Kournas </option> 
<option> Kydonia </option> 
<option> Omalos </option> 
<option> Preveli </option> 
<option> Rethymnon </option> 
<option> Sitia </option> 
<option> Timbaki </option> 
</select> 
</div> 
<div id="sidebar"><p class="t1" style="width:200px;">Please Wait..Loading Map</p></div> 
</div>   

编写 handleSelected() 函数处理 onchange() 事件

handleSelected() 函数获取一个 opt 参数。在函数体内定义一个 url 数组，这个数组的元素可以先自己定义。

然后调用 readMap(url) 方法处理该数组的某个元素。

function handleSelected(opt) {
	var url = xmlfile[opt.selectedIndex];
	readMap(url);
}  

数组 xmlfile[]

这个数组很容易理解，首先定义一个名为 xmlfile 的数组，然后给该数组的每个值定义一个字符串。

var xmlfile = [];
xmlfile[1] = "mapdatak_area.php@area=agn";
xmlfile[2] = "mapdatak_area.php@area=akr";
xmlfile[3] = "mapdatak_area.php@area=apo";
xmlfile[4] = "mapdatak_area.php@area=her";
xmlfile[5] = "mapdatak_area.php@area=kas";
xmlfile[6] = "mapdatak_area.php@area=kol";
xmlfile[7] = "mapdatak_area.php@area=kou";
xmlfile[8] = "mapdatak_area.php@area=kyd";
xmlfile[9] = "mapdatak_area.php@area=oma";
xmlfile[10] = "mapdatak_area.php@area=pre";
xmlfile[11] = "mapdatak_area.php@area=ret";
xmlfile[12] = "mapdatak_area.php@area=sit";
xmlfile[13] = "mapdatak_area.php@area=tim";  

readMap(url) 函数

request.open() 以 GET 的方式获取由下拉列表传过来的并经过 JavaScript 赋值的 url。然后就可以实现根据不同的 url 获取不同的 XML 文件进行解析，从而实现 Google Maps 的区域查询。

function readMap(url) {
	var request = GXmlHttp.create();
	request.open("GET", url, true);  // request XML from PHP with AJAX call
	request.onreadystatechange = function() {
		if (request.readyState == 4) {
			var xmlDoc = GXml.parse(request.responseText);
			// obtain the array of markers and loop through it
			i=[0];
			markers=[0];
			markers = xmlDoc.documentElement.getElementsByTagName("Placemark");
			map.getInfoWindow().hide();
			gmarkers = [];
			map.clearOverlays();
			side_bar_html = "";
			  
			var bounds = new GLatLngBounds();
			window.setTimeout(startmap,timeOut1);
		    }
	  }
	request.send(null);
}  

在这里使用了XML和异步远程方法调用 Using XML and Asynchronous RPC('AJAX')

可以参看以下官方 API 的例子：

// Center the map on Palo Alto 
var map = new GMap(document.getElementById("map")); 
map.addControl(new GSmallMapControl()); 
map.addControl(new GMapTypeControl()); 
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); 
// Download the data in data.xml and load it on the map. The format we 
// expect is: 
// <markers> 
//   <marker lat="37.441" lng="-122.141"/> 
//   <marker lat="37.322" lng="-121.213"/> 
// </markers> 
var request = GXmlHttp.create(); 
request.open("GET", "data.xml", true); 
request.onreadystatechange = function() { 
  if (request.readyState == 4) { 
    var xmlDoc = request.responseXML; 
    var markers = 
xmlDoc.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++) { 
      var point = new 
GPoint(parseFloat(markers[i].getAttribute("lng")), 
parseFloat(markers[i].getAttribute("lat"))); 
      var marker = new GMarker(point); 
      map.addOverlay(marker); 
    } 
  } 
} 

request.send(null);   

这种写法有一种更为简便的写法，具体可以参照Google Maps 服务。