|
3．景点查询功能
完成了地图初始化方法的开发后，就可以开发与景点查询功能相关的各个方法了，在“load”方法后添加如下代码。
function queryJd(jdmcStr){ //查询指定名称的景点
jdmcQJ=jdmcStr;//将景点名称记录到全局变量中
//调用GoogleMap中提供的方法查询指定景点
geocoder.getLocations(jdmcStr,addAddressToMap); }
//将特定地名显示在地图上的方法
function addAddressToMap(response){
if (!response || response.Status.code != 200) {
alert("对不起, 我们解析不到该地址的经纬度坐标！");
} else {
//获取查询到的地名对应的经纬度点
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
marker = new GMarker(point);//创建气球标记
map.setCenter(point, //设置地图中心点
(map.getZoom()>13)?map.getZoom():13);
map.addOverlay(marker);//在地图上添加标记
//生成信息窗口中信息的HTML代码
tempMsg="<font style=\"font-size:12\"><b>" +
place.address + "</b><br/>";
tempMsg=tempMsg+"<b>经度：</b>"+
place.Point.coordinates[0]+
" <b>纬度：</b>"+
place.Point.coordinates[1]+"<br/>";
//生成在百度与Google上查询景点信息的超链接代码
//由于景点名称中可能有空格符，但超链接中有空格
//符可能不起作用，因此要调用replace方法将景点名
//称中的空格替换为%20
tempMsg=tempMsg+"<a href=http://www.baidu.com/"+
"s?ie=utf-8&wd="+place.address.replace(/ /g,"%20")
+" target=_blank>在百度上查询更多</a> ";
tempMsg=tempMsg+"<a href=http://www.google.cn/"+
"search?hl=zh-CN&q="+ place.address.replace(/ /g,"%20")
+" target=_blank>在谷歌上查询更多</a></font>";
//在标记上打开信息窗口
marker.openInfoWindowHtml(tempMsg);
//将一段HTML绑定到标记上，当点击时HTML在
//标记上的信息窗口中显示
marker.bindInfoWindowHtml(tempMsg);
document.getElementById('lng').value=
place.Point.coordinates[0];
document.getElementById('lat').value=
place.Point.coordinates[1];
refreshJdHistoryList(jdmcQJ);//刷新历史列表
//创建指向Flicker中对应景点图片资源的URI
feed="http://api.flickr.com/services/"+
"feeds/photos_public.gne?tags="+
jdmcQJ+"&format=rss_200";
//用幻灯片方式播放feed 变量URI指定的系列图片
ss= new GFslideShow(feed, "slideShow", options);
}
}
//刷新景点历史列表的方法
function refreshJdHistoryList(jdmcStr) {
var flag=false;
//判断历史列表中是否已经有这个景点
for(var i=0;i<jdHistoryList.length;i++){
if(jdmcStr==jdHistoryList[i]){flag=true;}}
//历史列表中没有这个景点
if(!flag){
jdHistoryList.push(jdmcStr);//添加景点进列表
//刷新历史列表显示
var tempHtml="";
for(var i=0;i<jdHistoryList.length;i++){
tempHtml=tempHtml+
"<option value=\""+jdHistoryList[i]+"\">"
+jdHistoryList[i]+"</option>";
}
tempHtml="<select id=\"jdHistory\" size=\"23\" "
+ "onchange=\"jdlbChange(this.value)\">"
+tempHtml+"</select>";
var thb=
document.getElementById('jdHistoryBao')
thb.innerHTML=tempHtml;
}
}
function jdlbChange(jdmcStr){//在历史列表中选择景点
queryJd(jdmcStr);
document.getElementById("jdmc").value=jdmcStr;
}
其中“addAddressToMap”方法负责将查询到的景点用气球在地图上标出，同时还在气球上弹出对应的信息窗口显示景点的信息，并调用“refreshJdHistoryList”方法刷新景点历史列表。
“refreshJdHistoryList”方法负责刷新景点历史列表，如果列表中没有对应景点则将新景点添加到列表中，否则不更新景点历史列表。
4．地图显示模式及定位
完成了前面业务方法的开发后，最后就可以开发切换地图显示模式及根据用户输入的经纬度定位地图中心点的方法了，在“jdlbChange”方法后添加如下代码。
//动态设置地图中心点的方法
function selfSetLatLng(){
//获取用户输入的经纬度
lngIn=document.getElementById("lng").value;
latIn=document.getElementById("lat").value;
//判断经纬度是否合法，合法则移动地图中心点
//否则弹出报错对话框
if((!isNaN(lngIn*1))&&(!isNaN(latIn*1))){
if(lngIn<=180&&lngIn>=-180&&
latIn<=90&&latIn>=-90){
map.panTo(new GLatLng(latIn, lngIn));
}else{
alert("经度必须在-120到+120范围内，"+
"\n纬度必须在-90到+90范围内！！！");
}
}else{alert("经纬度必须为数值！！！");}
}
//切换地图绘制模式
function selfSetMapType(){
selfModelNo=document.getElementById("xsfs").value;
switch(selfModelNo){
case "0"://普通地图方式
map.setMapType(G_NORMAL_MAP);
break;
case "1"://卫星图片方式
map.setMapType(G_SATELLITE_MAP);
break;
case "2"://混合方式
map.setMapType(G_HYBRID_MAP);
break; }
}
完成了地图显示模式及定位相关方法的开发后，本Web应用的开发就完成了，此时只要在一台连接着Internet的计算机上使用浏览器打开网页即可看到如前面图1、图2所示的界面了。
六、 结语
通过开发基于GoogleMap地图服务与Flickr图片服务的世界各地旅游景点导航Ajax Web2.0应用，读者应该对如何使用Ajax对GoogleMap进行二次开发有了一定的了解，同时读者还应该对MushUp应用的开发有了基本的认识。
本案例虽然功能不是特别复杂，但读者若有需要可以非常方便地修改后将其嵌入到自己的Web应用中，为自己的Web应用增加更多有吸引力的功能。
|
