最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JS百度地图搜索悬浮窗功能
时间:2017-01-13 编辑:简简单单 来源:一聚教程网
这个需求的效果类似下面的截图,主要还是利用百度地图中自定义控件的功能,挺简单的。文档地址在这 http://lbsyun.baidu.com/index.php?title=jspopular
效果图:
代码
代码如下 | 复制代码 |
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;} #l-map{height:300px;width:100%;} #r-result{width:100%;}
// 百度地图API功能 function G(id) { return document.getElementById(id); }
var map = new BMap.Map("l-map"); map.centerAndZoom("北京",10); // 初始化地图,设置城市和地图级别。
// 定义一个控件类,即function function ZoomControl() { this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT; this.defaultOffset = new BMap.Size(10, 10); }
// 通过JavaScript的prototype属性继承于BMap.Control ZoomControl.prototype = new BMap.Control();
// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回 // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中 ZoomControl.prototype.initialize = function(map){ // 创建一个DOM元素 var div = document.createElement("div"); div.innerHTML = '
// 添加DOM元素到地图中 map.getContainer().appendChild(div); // 将DOM元素返回 return div; }
// 创建控件 var myZoomCtrl = new ZoomControl(); // 添加到地图当中 map.addControl(myZoomCtrl);
var ac = new BMap.Autocomplete( //建立一个自动完成的对象 {"input" : "suggestId" ,"location" : map });
ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件 var str = ""; var _value = e.fromitem.value; var value = ""; if (e.fromitem.index > -1) { value = _value.province + _value.city + _value.district + _value.street + _value.business; } str = "FromItem
value = ""; if (e.toitem.index > -1) { _value = e.toitem.value; value = _value.province + _value.city + _value.district + _value.street + _value.business; } str += " G("searchResultPanel").innerHTML = str; });
var myValue; ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件 var _value = e.item.value; myValue = _value.province + _value.city + _value.district + _value.street + _value.business; G("searchResultPanel").innerHTML ="onconfirm
setPlace(); });
function setPlace(){ map.clearOverlays(); //清除地图上所有覆盖物 function myFun(){ var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果 map.centerAndZoom(pp, 14); map.addOverlay(new BMap.Marker(pp)); //添加标注 } var local = new BMap.LocalSearch(map, { //智能搜索 onSearchComplete: myFun }); local.search(myValue); } |
-
上一个: 原生js实现焦点轮播图效果的教程
相关文章
- js实现百度地图与列表联动代码 12-31
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31