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

百度了好多篇文章，发现这个是最有用的，复制下来之后，可以改地址，修改“北京”为你想要的地址就好了，搜索框输入你想要查找的地址，然后会联想出相关地址，点击就可以直接定位到了，超级好用，分享出来，嘻嘻。

主要还是利用百度地图中自定义控件的功能，文档地址在这 http://lbsyun.baidu.com/index.php?title=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%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}#l-map{height:300px;width:100%;}#r-result{width:100%;}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script><title>关键字输入提示词条</title>
</head>
<body><div id="l-map"></div>
</body>
</html><script type="text/javascript">// 百度地图API功能function G(id) {return document.getElementById(id);}var map = new BMap.Map("l-map");map.centerAndZoom("北京",10); // 初始化地图,设置城市和地图级别。// 定义一个控件类,即functionfunction ZoomControl() {this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;this.defaultOffset = new BMap.Size(10, 10);}// 通过JavaScript的prototype属性继承于BMap.ControlZoomControl.prototype = new BMap.Control();// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中ZoomControl.prototype.initialize = function(map){// 创建一个DOM元素var div = document.createElement("div");div.innerHTML = '<div id="r-result">搜索地址:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div><div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>';// 添加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<br />index = " + e.fromitem.index + "<br />value = " + value;value = "";if (e.toitem.index > -1) {_value = e.toitem.value;value = _value.province + _value.city + _value.district + _value.street + _value.business;}str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;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<br />index = " + e.item.index + "<br />myValue = " + myValue;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);}
</script>

JS实现百度地图搜索悬浮窗功能相关推荐

Android百度地图悬浮窗样式,JS百度地图搜索悬浮窗功能
效果图: 代码 body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;} # ...
autojs开启悬浮窗权限_微信悬浮窗功能普及？甚至更胜一筹
最近微信的安卓版本更新了悬浮窗功能的确很好用!但悬浮窗有数量限制,而且仅限于微信.小狐日常在刷微博的时候,看到好的文章,当时又看不完,就在想,这时要是有微信的悬浮窗功能该多好! 甚至一些文章只看到一半 ...
Android 悬浮窗功能实现（微信语音通话悬浮窗效果实现）
目录 1.基本介绍 2.代码示例 3.实现效果及便捷工具类 4.仿微信语音通话悬浮窗效果实现 4.1 需求分析及效果展示 4.2 实现 5.最后 1.基本介绍 Android 界面绘制都是通过 Win ...
安卓股票悬浮窗_Android 实现悬浮窗功能
前言我们大多数在两种情况下可以看到悬浮窗,一个是视频通话时的悬浮窗,另一个是360卫士的悬浮球,实现此功能的方式比较多,这里以视频通话悬浮窗中的需求为例.编码实现使用Kotlin.Java版本留言邮 ...
安卓股票悬浮窗_Android 实现可任意拖动的悬浮窗功能(类似悬浮球）
最近开发项目中,有个在屏幕上任意拖动的悬浮窗功能,其实就是利用 WindowManager的api来完成这个需求,具体的实现的功能如下: 1.自定义view import android.conten ...
android 仿微信来电_Android 悬浮窗功能实现（微信语音通话悬浮窗效果实现）
目录 1.基本介绍 2.代码示例 3.实现效果及便捷工具类 4.仿微信语音通话悬浮窗效果实现 4.1 需求分析及效果展示 4.2 实现 5.最后 1.基本介绍 Android 界面绘制都是通过 Win ...
Android 悬浮窗功能的实现
前言我们大多数在两种情况下可以看到悬浮窗,一个是视频通话时的悬浮窗,另一个是360卫士的悬浮球,实现此功能的方式比较多,这里以视频通话悬浮窗中的需求为例.编码实现使用Kotlin.Java版本留言邮 ...
Android展开悬浮窗功能,Android 悬浮窗（附圆形菜单悬浮窗）
序言 Android悬浮窗的实现,主要有四个步骤: 1. 声明及申请权限 2. 构建悬浮窗需要的控件 3. 将控件添加到WindowManager 4. 必要时更新WindowManager的布局一 ...
html鼠标触发显示悬浮窗,JS事件之鼠标悬浮窗（鼠标悬浮窗抖动问题的解决）
鼠标进入显示悬浮窗,思路有简单有困难. 首先要注意的是我们要给悬浮窗设置position为absolute,不然我们改了 style.left style.top发现没有变化很尴尬.其余的内容看起来就 ...

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

JS实现百度地图搜索悬浮窗功能相关推荐

最新文章

热门文章