JS百度地图搜索悬浮窗功能

这个需求的效果类似下面的截图，主要还是利用百度地图中自定义控件的功能，挺简单的。文档地址在这http://lbsyun.baidu.com/index.php?标题jspopular

效果图：

代码

！DOCTYPE html html head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/meta name=' viewport ' content=' initial-scale=1.0，user-scalable=no '/style type=' text/CSS ' body，html { width : 100%；高度： 100%;余量：0字体系列： '微软雅黑；font-size :14 px} # l-map { height :300 px；宽度：100%;} # r-结果{宽度：100%；}/样式脚本类型=' text/JavaScript ' src=' http :http://API。地图。百度。com/API？v=1.4 /脚本标题关键字输入提示词条/title/head body div id=' l-map '/div/body/html脚本类型=' text/JavaScript '//百度地图应用程序接口功能函数G(id){返回文档。getelementbyid(id)；} var映射=新的BMap .地图(“l-map”)；map.centerAndZoom('北京',10);//初始化地图，设置城市和地图级别。 //定义一个控件类，即函数函数ZoomControl(){ this。default ANCHOR=BMAP _ ANCHOR _ TOP _ LEFT；this.defaultOffset=新的BMap .尺寸(10,10);} //通过Java脚本语言的原型属性继承于BMap .控制动物控制。原型=新的BMap .control()；//自定义控件必须实现自己的初始化方法，并且将控件的数字正射影像图元素返回//在本方法中创建个差异元素作为控件的容器，并将其添加到地图容器中zoomcontrol。原型。initialize=function(map){//创建一个数字正射影像图元素var div=文档。创建元素(' div ')；div.innerHTML='div id='r-result '搜索地址：输入类型='text' id='暗示size='20' value='百度style=' width :150 px//div div id=' search result panel ' style=' border :1 px solid # C0C 0；宽度width :150 pxh three : auto display : none/div '；//添加数字正射影像图元素到地图中map.getContainer().appendChild(div)；//将数字正射影像图元素返回返回div} //创建控件var myZoomCtrl=new ZoomControl()；//添加到地图当中地图。add control(myzoomtrl)；var ac=新的BMap .自动完成(//建立一个自动完成的对象{'input' : '暗示tId '，'位置' :地图});空调。addeventlistener('高亮显示时'，函数(e) { //鼠标放在下拉列表上的事件var str=var _ value=e . from item。价值；定义变量值=' ';如果(例如从项目。index-1){ value=_ value。savage _ value。城市价值。地区值。街道_价值。商业；} str=' FromItem br/index=' e . FromItem。索引“br/value=”值；值=' ';如果(例如toitem。index-1){ _ value=e . toitem。价值；value=_ value。savage _ value。城市价值。地区值。街道_价值。商业；} str=' br/ToItembr/index=' e . toitem。索引“br/value=”值；G('searchResultPanel ').innerHTML=str })；var myvalueac . addeventlistener(' onconfirm '，函数(e) { //鼠标点击下拉列表后的事件var _ value=e . item价值；myValue=_value。省得_ VaLue。city _ VaLue。学区_ VaLue。street _ VaLue。商业；G('searchResultPanel ').innerHTMl=' onconfirmbr/index=' e . item。索引“br/MyVaLue=”MyVaLue；set place()；});函数setPlace(){ map。清除覆盖()；//清除地图上所有覆盖物函数myFun(){ var pp=local.getResults().getPoi(0).点；//获取第一个智能搜索的结果map.centerAndZoom(第14页);map.addOverlay(新BMap .标记(PP))；//添加标注} var local=新的BMap .LocalSearch(地图，{ //智能搜索onsearchccomplete : my fun })；本地的。搜索(MyVaLue)；}/脚本以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。