码迷,mamicode.com
首页 > Web开发 > 详细

GIS(七)——js版搜狗地图搜索功能美化版

时间:2014-10-07 23:09:44      阅读:265      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   os   使用   ar   java   for   

       在前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" />
       页面全部重新替换一下:
<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>

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

bubuko.com,布布扣bubuko.com,布布扣bubuko.com,布布扣bubuko.com,布布扣bubuko.com,布布扣bubuko.com,布布扣bubuko.com,布布扣bubuko.com,布布扣bubuko.com,布布扣bubuko.com,布布扣

bubuko.com,布布扣bubuko.com,布布扣bubuko.com,布布扣bubuko.com,布布扣 周边搜索按钮PS下载

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

       下面就是这个搜索的智能提示了。在所有的地图提供商的搜索页面,都提供了智能提示的功能。所以,我也要把这个功能加到这里。但是却怎么也找不到搜狗地图的智能提示的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中,找到了一个输入提示的示例代码,点击这里进行查看。智能提示主要是用到了一个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;
}
       终于完工了,最终的效果图如下:

bubuko.com,布布扣

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


GIS(七)——js版搜狗地图搜索功能美化版

标签:style   blog   http   io   os   使用   ar   java   for   

原文地址:http://blog.csdn.net/xiaoxian8023/article/details/39858215

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!