GIS（七）——js版搜狗地图搜索功能美化版

       在前2篇文章中介绍了关键字搜索和周边搜索的功能，但是界面比较简陋，所以这一版我主要做一些美化工作。

       这次主要优化的方面有2个方面，一个是页面的样式，包括字体、按钮、布局等；二是要添加一个搜索的智能提示。

       首先修改页面的样式，更改

  #map{position:absolute;width:1364px; height:550px;}
  #option{
      height:50px;
      width:1336px;
      border:solid 1px #CCCCCC;
      padding:10px;
  }

       由于周边搜索的填充色太淡了，所以我做了一些修改：

//改变半圆填充颜色
function changeRadiusColor(){
	var i=0;
	while($("ellipse").length<1 && i<1000){i++; }
	$("ellipse:eq(0)").attr("fill","#9ec0de");
}

       为了避免在输入内容，但是未点击搜索，而是直接点击周边搜索而出现错误，所以我添加了一个变量：

var isSearch=false;//标记是否点击搜索

//搜索
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);

      页面全部重新替换一下：

       这样页面就大变样了。主要是把布局修改了一下，搜索部分和地图之间有了层次感。搜索框和周边搜索也都使用了图片来进行了美化。下面是我美化好的图片和部分原图资料：

 周边搜索按钮PS下载

       这样，美化部分就算是完成了。

       下面就是这个搜索的智能提示了。在所有的地图提供商的搜索页面，都提供了智能提示的功能。所以，我也要把这个功能加到这里。但是却怎么也找不到搜狗地图的智能提示的js。看来搜狗地图没有提供这方面的实例和js。既然这样，那我只好用其他提供商的智能提示了。

        在百度上搜索“百度搜索栏智能提示功能代码”，第一个就是教如何在页面上使用百度搜索栏的智能提示。首先在页面上添加一个input：

       当设置baiduSug=1时，用户选中sug词条时默认执行表单提交动作；当设置baiduSug=2时，用户选中sug词条时不执行表单提交动作。 

       然后在网页中引入Javascript文件：

       这样功能上就实现了。但是为了更美观一些，我们再设定一下下拉时的字体样式：

//百度智能提示下拉框字体
.tangram-suggestion table tr{
  font-size:20px;
}

       到此GIS系列的文章全部结束了。如果文中有什么错误之处，欢迎大家指正。