? ? ?在前2篇文章中介紹了關鍵字搜索和周邊搜索的功能，但是界面比較簡陋，所以這一版我主要做一些美化工作。
? ? ?這次主要優化的方面有2個方面，一個是頁面的樣式，包括字體、按鈕、布局等；二是要添加一個搜索的智能提示。
? ? ?首先修改頁面的樣式，更改
~~~
#map{position:absolute;width:1364px; height:550px;}
#option{
height:50px;
width:1336px;
border:solid 1px #CCCCCC;
padding:10px;
}
~~~
? ? ?添加兩個css樣式
~~~
<link href="http://mfxuan.free.800m.net/blogCss/reset.css" type="text/css" rel="stylesheet" />
<link href="http://mfxuan.free.800m.net/blogCss/main.css" rel="stylesheet" type="text/css" />
~~~
? ? ?由于周邊搜索的填充色太淡了，所以我做了一些修改：
~~~
//改變半圓填充顏色
function changeRadiusColor(){
var i=0;
while($("ellipse").length<1 && i<1000){i++; }
$("ellipse:eq(0)").attr("fill","#9ec0de");
}
~~~
? ? ?為了避免在輸入內容，但是未點擊搜索，而是直接點擊周邊搜索而出現錯誤，所以我添加了一個變量：
~~~
var isSearch=false;//標記是否點擊搜索
~~~
? ? 修改搜索這個方法，當點擊搜索時把這個變量為true：
~~~
//搜索
function search_center(){
var kw = $(".kw").val();
isSearch = true;
search(null,kw);
}
~~~
? ? ?添加一個周邊查詢前的判斷方法：
~~~
function search_area_before(classid){
if(!isSearch){//如果沒有搜索，則先執行搜索，再搜索周邊
search_center();
setTimeout(search_area,1000,classid);
//設定搜索半圓的填充色
setTimeout(changeRadiusColor,1500);
}else{
search_area(classid);
}
}
~~~
? ? 修改search_area方法，在方法的最后添加一下代碼：
~~~
//重新定位地圖中心點
setTimeout(toCenter,500);
//設定搜索半圓的填充色
setTimeout(changeRadiusColor,300);
~~~
? ? 頁面全部重新替換一下：
~~~
<body onload="initialize()">
<div class="yxqy">
<!-- 地圖搜索 -->
<div id="dtss" class="div_tab" style="display:block">
<div class="map_btn">
<span class="ssq"><input type="text" class="kw"
onblur="if(this.value=='') $(this).css('background-image','url(http://mfxuan.free.800m.net/blogImage/map_sskBG2.jpg)')"
onfocus="$(this).css('background-image','url(http://mfxuan.free.800m.net/blogImage/map_sskBG.jpg)')"
onkeydown="if(event.keyCode == '13')search_center();"/>
<a href="#" onclick="search_center()">
<img src="http://mfxuan.free.800m.net/blogImage/btn_serch.jpg" width="40" height="40" /></a></span>
<!-- 搜索周邊 -->
<a href="#" onclick="search_area_before('97,1264,1262')">
<img src="http://mfxuan.free.800m.net/blogImage/btn_zbgjz.jpg" /></a>
<a href="#" onclick="search_area_before('1228,1403,1330,1332')">
<img src="http://mfxuan.free.800m.net/blogImage/btn_zbcy.jpg" /></a>
<a href="#" onclick="search_area_before('83,1321,1259')">
<img src="http://mfxuan.free.800m.net/blogImage/btn_zbsc.jpg" /></a>
<a href="#" onclick="search_area_before('C_32')">
<img src="http://mfxuan.free.800m.net/blogImage/btn_zbld.jpg" /></a>
<a href="#" onclick="search_area_before('1261')">
<img src="http://mfxuan.free.800m.net/blogImage/btn_zbjc.jpg" /></a>
<a href="#" onclick="search_area_before('39')">
<img src="http://mfxuan.free.800m.net/blogImage/btn_zbyy.jpg" /></a>
</div>
<div id="map" class="map_map"></div>
<div id="result"></div>
</div>
</div>
</body>
~~~
? ? ?這樣頁面就大變樣了。主要是把布局修改了一下，搜索部分和地圖之間有了層次感。搜索框和周邊搜索也都使用了圖片來進行了美化。下面是我美化好的圖片和部分原圖資料：
[周邊搜索按鈕PS下載](http://mfxuan.free.800m.net/blogImage/btn_zbgjz.psd)
? ? ?這樣，美化部分就算是完成了。
? ? ?下面就是這個搜索的智能提示了。在所有的地圖提供商的搜索頁面，都提供了智能提示的功能。所以，我也要把這個功能加到這里。但是卻怎么也找不到搜狗地圖的智能提示的js。看來搜狗地圖沒有提供這方面的實例和js。既然這樣，那我只好用其他提供商的智能提示了。
? ? ?在百度上搜索“百度搜索欄智能提示功能代碼”，第一個就是教如何在頁面上使用百度搜索欄的智能提示。首先在頁面上添加一個input：
~~~
<input type="text" name="word" baiduSug="1|2">
~~~
? ? ?當設置baiduSug=1時，用戶選中sug詞條時默認執行表單提交動作；當設置baiduSug=2時，用戶選中sug詞條時不執行表單提交動作。?
? ? ?然后在網頁中引入Javascript文件：
~~~
<script charset="gbk" src="http://www.baidu.com/js/opensug.js"></script>
~~~
? ? ?這里需要特別強調的是：其中Javascript的文件位置是非常有講究的！必須放置在</body>標簽的后面！
? ? ?本來吧到這里應該就算是結束了，不過卻出現了一個小問題。如果你留意的話，在地圖搜索頁面，提供商提示的都是地點，但是使用百度搜索欄則提示的不全是地點。所以必須選擇另一個方案了。
? ? ?在百度地圖的示例DEMO中，找到了一個輸入提示的示例代碼，[點擊這里](http://developer.baidu.com/map/jsdemo.htm#a6_2)進行查看。智能提示主要是用到了一個js：
~~~
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script>
~~~
? ? ?這個密鑰是你在百度開發者中心注冊后得到的，不會的自己百度就行了。下面接著對地圖進行修改。在頁面上添加百度地圖智能提示的js：
~~~
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F135d24da388348cb105c6b226fb5801"></script>
~~~
? ? 在頁面的最后(</html>)加入一段js：
~~~
<script type="text/javascript">
var ac = new BMap.Autocomplete( //建立一個自動完成的對象
{"input" : "suggestId"
});
ac.addEventListener("onconfirm", function(e) { //鼠標點擊下拉列表后的事件
search_center();
});
</script>
~~~
? ? ?搜索的input，添加一個id為"suggestId" ，即：
~~~
<input type="text" class="kw" id="suggestId"
onblur="if(this.value=='') $(this).css('background-image','url(images/map_sskBG2.jpg)')"
onfocus="$(this).css('background-image','url(images/map_sskBG.jpg)')"
onkeydown="if(event.keyCode == '13')search_center();"/>
~~~
? ? ?這樣功能上就實現了。但是為了更美觀一些，我們再設定一下下拉時的字體樣式：
~~~
//百度智能提示下拉框字體
.tangram-suggestion table tr{
font-size:20px;
}
~~~
? ? ?終于完工了，最終的效果圖如下：
[點擊這里到網站上查看](http://mfxuan.free.800m.net/searchscenic.html)
? ? ?到此GIS系列的文章全部結束了。如果文中有什么錯誤之處，歡迎大家指正。
