百度地图之自动提示--autoComplete
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>百度地图之自动提示--autoComplete</title>
</head>
<body>
<button id="btn1">将深圳设置为检索区域</button>
<button id="btn2">将上海设置为检索区域</button>
<input id="register2suggestId" size="30" type="text" class="w-100-nick" placeholder="请输入"/>
<div id="register2map" style="width:300px;height:200px;"></div>
<script src="http://api.map.baidu.com/api?v=2.0&ak=ZUHewhg0KDCnZa5emK9hxRib&callback=init"></script>
<script> window.windowMapBusiness = {
//创建和初始化地图函数：
initMap: function (id, addr, s) {
this.createMap(id, addr, s);//创建地图
this.setMapEvent();//设置地图事件
this.addMapControl();//向地图添加控件
},
//创建地图函数：
createMap: function (id, addr, s) {
s = s ? s : 8;
window.map = new BMap.Map(id);// 将map变量存储在全局 在百度地图容器中创建一个地图
if (addr) {
map.centerAndZoom(addr, s);//设定地图的中心点和坐标并将地图显示在地图容器中
} else {
var geolocation = new BMap.Geolocation(); //实例化定位对象。
geolocation.getCurrentPosition(function (r) { //定位结果对象会传递给r变量 r.point.lng 经度 r.point.lat 纬度
if (this.getStatus() == BMAP_STATUS_SUCCESS) { //通过Geolocation类的getStatus()可以判断是否成功定位。
map.centerAndZoom(r.point, s);//设定地图的中心点和坐标并将地图显示在地图容器中
var mk = new BMap.Marker(r.point); //基于定位的这个点的点位创建marker
map.addOverlay(mk); //将marker作为覆盖物添加到map地图上
map.panTo(r.point); //将地图中心点移动到定位的这个点位置。注意是r.point而不是r对象。
} else {
map.centerAndZoom('广东省深圳市', s);//设定地图的中心点和坐标并将地图显示在地图容器中
}
}, {enableHighAccuracy: true});
}
},
//地图事件设置函数：
setMapEvent: function () {
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableKeyboard();//启用键盘上下左右键移动地图
//map.disableDragging(); //禁止拖拽
// map.enableDragging(); // 开启拖拽
map.enableInertialDragging(); // 开启惯性拖拽
},
//地图控件添加函数：
addMapControl: function (sc) {
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE
});
map.addControl(ctrl_nav);
//向地图中添加缩略图控件
if (sc) {
var ctrl_ove = new BMap.OverviewMapControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
isOpen: 1
});
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({
anchor: BMAP_ANCHOR_BOTTOM_LEFT
});
map.addControl(ctrl_sca);
}
},
// 设置单个标注-有单行提示文字
addMarker: function (addr, sc, lf, top) {
map.clearOverlays();//清除所有标注
new BMap.Geocoder().getPoint(addr, function (point) {
if (point) {
var sc = sc ? sc : 8,
lf = lf ? lf : 10 - addr.length * 6,//百度地图标注字体12px
top = top ? top : -20,
address = new BMap.Point(point.lng, point.lat);
map.centerAndZoom(address, sc);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.setLabel(new BMap.Label(addr, {offset: new BMap.Size(lf, top)}));
}
});
}, //处理地址--传入地址、函数 处理经纬度等 执行环境window 赋值通过scope 如 $scope.Lon=point.lng; $scope.Lat=point.lat;
responseAddr: function (addr, fun) {
new BMap.Geocoder().getPoint(addr, function (point) {
if (point) {//point.lng point.lat
fun(point);
}
});
},
//百度地图自动提示 -（未解决）还是检索的上一次的区域
autoComplete: function (suggestId, setLocation, keywords, sc, lf, top) {// id必填 keywords-array 其余-string
var me = this,
//建立一个自动完成的对象
ac = new BMap.Autocomplete({
"input": suggestId, //输入框id
"location": setLocation//设定返回结果的所属范围
}),
iptTrigger = document.getElementById(suggestId); //删除多余的元素，但百度地图自动生成的js报错 报错并不影响提示功能 暂设置为隐藏多余元素
function hideRestAcBox() {
var elm = Array.prototype.slice.call(document.getElementsByClassName('tangram-suggestion-main'));
if (elm.length) {
elm.forEach(function (v, i) {
// v.parentNode.removeChild(v);
v.style.zIndex = -1;
v.style.visibility = 'hidden';
});
elm[elm.length - 1].style.zIndex = 999;
elm[elm.length - 1].style.visibility = 'visible';
}
} function hideAcBox() {
var elm = Array.prototype.slice.call(document.getElementsByClassName('tangram-suggestion-main'));
elm.forEach(function (v, i) {
v.style.zIndex = -1;
v.style.visibility = 'hidden';
});
} //输入框的值控制 提示信息列表容器显示隐藏
function boxHide() {
console.log(this.value);
if (this.value) {
if (keywords) {//发起某个关键字的提示请求，会引起onSearchComplete的回调
ac.search.apply(ac, keywords);
}
hideRestAcBox();
} else {
hideAcBox();
}
} iptTrigger.oninput = boxHide;//非ie
iptTrigger.onpropertychange = boxHide;//ie
//鼠标点击下拉列表后的事件
ac.addEventListener("onconfirm", function (e) {
hideAcBox();
var _value = e.item.value;
var myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
console.log(myValue);
me.addMarker(myValue, sc, lf, top);
});
} }; document.getElementById('btn1').onclick = function () {
console.log(1); windowMapBusiness.autoComplete('register2suggestId', '深圳市', ['大厦', '楼', '大学', '校区', '学院', '中专', '中学', '小学', '幼儿园']); };
document.getElementById('btn2').onclick = function () {
console.log(2); windowMapBusiness.autoComplete('register2suggestId', '上海市', ['大厦', '楼', '大学', '校区', '学院', '中专', '中学', '小学', '幼儿园']); }; setTimeout(function () {
windowMapBusiness.initMap('register2map', '深圳');
}, 1000);
</script>
</body>
</html>
百度地图之自动提示--autoComplete的更多相关文章
- 百度地图的demo提示key验证错误！错误码：230;
在已经有BaiduMap的APIKey后使用AndroidStudio导入Baidu地图的as版的demo,提示key验证错误!错误码:230; 首先,因为百度地图demo中用自己的keystore文 ...
- 使用百度地图API自动获取地址和经纬度
先上效果图,这是直接点击获取经纬度和地址的.没有做搜索的功能. 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- echarts 中国地图 数据自动提示
mounted() { // 首先每种图是根据series -->type决定的 eg:bar--柱状图 line 折线图 pie饼图 map地图等等三部曲 跟着走 // @第一步都是初始化 v ...
- 顾维灏谈百度地图数据采集：POI自动处理率达90%
顾维灏谈百度地图数据采集:POI自动处理率达90% 发布时间:2015-12-21 22:37 来源:cnsoftnews.com 作者: 百度地图还创新研发高精地 ...
- Vue中加载百度地图
借助百度地图的 LocalSearch 和 Autocomplete 两个方法 实现方式:通过promise以及百度地图的callback回调函数 map.js 1 export function M ...
- 百度地图api 实例 自动提示 并计算两地的行驶距离
百度地图api 实例 自动提示 并计算两地的行驶距离 <!DOCTYPE html> <html> <head> <meta http-equiv=" ...
- 百度地图API提示"230错误 APP Scode校验失败"
笔者近2天在 Android Studio上玩了一下百度地图,碰到了常见的"230错误 APP Scode校验失败",下面我来介绍一下具体的解决办法. 1.在andriodstud ...
- 百度地图API 级别自动缩放
今天做一个基于百度地图API的小项目 查了很长时间apid都没有找到地图呈现出来的时候地图按坐标的多少自动缩放显示的等级比例,特此记录笔记!var points = [point1, point2,p ...
- 百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法
原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法 公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提 ...
随机推荐
- Reading SBAR SDN flow-Based monitoring and Application Recognition
概要 在sdn下,控制平面基于网络测量的的数据控制网络,而细粒度的管理得益于细粒度的测量数据.针对sdn环境下的细粒度测量(识别具体应用程序),可以实现对细粒度的流量管控. 设计了识别系统SBAR,对 ...
- Spring Cloud（四）：服务容错保护 Hystrix【Finchley 版】
Spring Cloud(四):服务容错保护 Hystrix[Finchley 版] 发表于 2018-04-15 | 更新于 2018-05-07 | 分布式系统中经常会出现某个基础服务不可用 ...
- generate failed: Cannot resolve classpath entry: mysql-connector-java-5.1.38.jar
详细错误及处理方法如下: [ERROR] Failed to execute goal org.mybatis.generator:mybatis-generator-maven-plugin:1.3 ...
- yyy loves Easter_Egg I（恶心的字符串模拟）
题目背景 Soha的出题效率着实让人大吃一惊.OI,数学,化学的题目都出好了,物理的题还没有一道.于是,Huntfire,absi2011,redbag对soha进行轮番炸,准备炸到soha出来,不料 ...
- Ubuntu16.04安装TensorFlow
1.查看tensoflow与CUDA对应版本: windows端:https://tensorflow.google.cn/install/source_windows Linux端:https:// ...
- Java工具-----native2ascii
概述 native2ascii.exe位于%JAVA_HOME/bin目录下,所以要使用,得先安装JDK. 该工具用来将本地编码转换为Unicode,英文字母.阿拉伯数字不会转化. 官方文档:http ...
- MongoDB DBA 实践6-----MongoDB的分片集群部署
一.分片 MongoDB使用分片技术来支持大数据集和高吞吐量操作. 1.分片目的 对于单台数据库服务器,庞大的数据量及高吞吐量的应用程序对它而言无疑是个巨大的挑战.频繁的CRUD操作能够耗尽服务器的C ...
- Java使用JodaTime处理时间
简介 在Java中处理日期和时间是很常见的需求,基础的工具类就是我们熟悉的Date和Calendar,然而这些工具类的api使用并不是很方便和强大,于是就诞生了Joda-Time这个专门处理日期时间的 ...
- [原]nginx 一下快一下慢的问题
在本机用thinkphp建了一个小网站,没任何问题,发布到云空间,就出现访问很慢的情况,而且是一下快一下慢,奇数次快,偶数次慢 换了一台win10的笔记本,情况一样,更新了phpstudy更新了thi ...
- java-spark的各种常用算子的写法
通常写spark的程序用scala比较方便,毕竟spark的源码就是用scala写的.然而,目前java开发者特别多,尤其进行数据对接.上线服务的时候,这时候,就需要掌握一些spark在java中的使 ...