GIS(七)——js版搜狗地图搜索功能美化版
在前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 !-- 地图搜索 -- div id="dtss" div span input type="text" 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))" a href="#" img src="http://mfxuan.free.800m.net/blogImage/btn_serch.jpg" width="40" height="40" / /a /span !-- 搜索周边 -- a href="#" img src="http://mfxuan.free.800m.net/blogImage/btn_zbgjz.jpg" / /a a href="#" img src="http://mfxuan.free.800m.net/blogImage/btn_zbcy.jpg" / /a a href="#" img src="http://mfxuan.free.800m.net/blogImage/btn_zbsc.jpg" / /a a href="#" img src="http://mfxuan.free.800m.net/blogImage/btn_zbld.jpg" / /a a href="#" img src="http://mfxuan.free.800m.net/blogImage/btn_zbjc.jpg" / /a a href="#" img src="http://mfxuan.free.800m.net/blogImage/btn_zbyy.jpg" / /a /div div id="map" /div div id="result" /div /div /div /body
这样页面就大变样了。主要是把布局修改了一下,搜索部分和地图之间有了层次感。搜索框和周边搜索也都使用了图片来进行了美化。下面是我美化好的图片和部分原图资料:
这样,美化部分就算是完成了。
下面就是这个搜索的智能提示了。在所有的地图提供商的搜索页面,都提供了智能提示的功能。所以,我也要把这个功能加到这里。但是却怎么也找不到搜狗地图的智能提示的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" 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))" /
这样功能上就实现了。但是为了更美观一些,我们再设定一下下拉时的字体样式:
//百度智能提示下拉框字体 .tangram-suggestion table tr{ font-size:20px; }终于完工了,最终的效果图如下:
到此GIS系列的文章全部结束了。如果文中有什么错误之处,欢迎大家指正。
龙轩8023 熟悉javaee开发,有多年支付领域的开发经验。关注开源~ httpclientUtil开源项目创建者。https://github.com/Arronlong
相关文章
- 【小程序】js单击事件中调用wxml中传递的数据(图文+完整示例)
- d3.js封装文本实现自动换行和旋转平移等功能
- 43dwr - util.js 功能(useLoadingMessage)
- 38dwr - util.js 功能(onReturn)
- 33dwr - util.js 功能(addOptions 和removeAllOptions)
- 31dwr - util.js 功能
- 30dwr - engine.js 功能(选项说明)
- Vue - 搜索关键字标红高亮(用户输入关键词搜索后,在搜索结果的列表标题上匹配并标红加粗)怎么使内容文本标红高亮的最详细教程,Nuxt.js uni-app 也适用,搜索功能及搜索结果关键字高亮源码
- 【转】利用js来实现微信摇一摇来自动更换网页背景的功能
- 【一个小功能】从js判断ie版本,浅谈navigator对象的appName属性
- 一道常被人轻视的前端JS面试题
- js瀑布流效果
- 《写给PHP开发者的Node.js学习指南》一2.2 预定义的PHP变量
- 《D3.js数据可视化实战手册》——2.3 选取多个元素
- js图片加载效果(延迟加载+瀑布流加载)
- js防止重复点击或者点击过快方法
- JS实现一键回到顶部的功能(兼容所有浏览器,超级详细)
- JS初识高阶函数和函数柯里化
- [js高手之路]设计模式系列课程-设计一个模块化扩展功能(define)和使用(use)库
- js cookie跨域设置
- js利用clipboardData在网页中实现截屏粘贴的功能
- js:构造函数和class
- Three 之 three.js (webgl)PostProcessing/shader/EffectComposer 屏幕渲染 之 简单dotScreen 屏幕点效果
- Three 之 three.js (webgl)着色器材质的一些内置变量的简单说明(gl_PointSize/gl_Position/gl_PointCoord/gl_FragCoord...)
- js里==和===有什么区别
- measure.js,一个Web元素度量工具,欢迎来star~~,为ui走查打造(脱离蓝湖也能使用它的度量功能
- js和css动态画出一只安卓机器人,附代码