使用百度地图实现详细地址自动补全
2024-05-19 12:56:30
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>地址选择</title><style type="text/css">body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}#l-map{height:500px;width:100%;}#r-result{width:100%;}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=EG3bwH1OHAQZMbDYU5Cuq5Zc935lhmFn"></script>
</head><body>
<div id="r-result"><input type="text" id="suggestId" size="20" style="width:500px;height:30px" placeholder="请输入地址"/><input type="button" οnclick="addrSearch()" class="btn btn-danger" value="搜索" style="width: 150px;height: 35px">
</div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
<div id="l-map"></div>
<script type="text/javascript">var marker;var zoomSize = 18;var map = new BMap.Map("l-map");var lon = 116.404; //默认为北京市var lat= 39.915;//业务处理，获取业务中的经纬度，有则处理，没有则用默认北京if(typeof getBizPoint == "function"){var pointJson = getBizPoint();lon = pointJson.lon;lat = pointJson.lat;}//确定中心位置var point = new BMap.Point(lon, lat);map.centerAndZoom(point, zoomSize);//标注marker = new BMap.Marker(point);// 创建标注map.addOverlay(marker); // 将标注添加到地图中marker.enableDragging(); // 可拖拽marker.addEventListener("dragend", setBizValue);// 添加带有定位的导航控件var navigationControl = new BMap.NavigationControl({// 靠左上角位置anchor: BMAP_ANCHOR_TOP_LEFT,// LARGE类型type: BMAP_NAVIGATION_CONTROL_LARGE,// 启用显示定位enableGeolocation: true});map.addControl(navigationControl);var geoc = new BMap.Geocoder();//输入地址事件处理 startvar 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; //获取第一个智能搜索的结果setBizValueForPoint(pp);map.centerAndZoom(pp, zoomSize);marker = new BMap.Marker(pp);marker.enableDragging(); // 可拖拽map.addOverlay(marker); //添加标注marker.addEventListener("dragend", setBizValue);}var local = new BMap.LocalSearch(map, { //智能搜索onSearchComplete: myFun});local.search(myValue);}function G(id) {return document.getElementById(id);}//输入地址事件处理 end//地址转坐标function addrSearch(serachAddr){// 创建地址解析器实例var myGeo = new BMap.Geocoder();// 将地址解析结果显示在地图上,并调整地图视野if(!serachAddr){serachAddr = $("#suggestId").val();}myGeo.getPoint(serachAddr, function(point){if (point) {setBizValueForPoint(point);map.clearOverlays();map.centerAndZoom(point, zoomSize);marker = new BMap.Marker(point);marker.enableDragging(); // 可拖拽map.addOverlay(marker); //添加标注marker.addEventListener("dragend", setBizValue);}else{console.log("search click no results!")}});}//业务方法 start//根据事件，设置经纬度和地址function setBizValue(e){var point = e.point;setBizValueForPoint(point);}//根据Point，设置经纬度和地址function setBizValueForPoint(point){lon = point.lng;lat = point.lat;geoc.getLocation(point, function(rs){var addComp = rs.addressComponents;addr = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;if(typeof setBizFun == "function"){setBizFun({lon:lon,lat:lat,addr:addr});}});}//根据marker，设置经纬度和地址function setBizValueForMarker(){var point = marker.getPosition();setBizValueForPoint(point);}//end</script>
</body>
</html>
简洁版的检索
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>地址选择</title><style type="text/css">body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}#r-result{width:100%;}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=EG3bwH1OHAQZMbDYU5Cuq5Zc935lhmFn"></script>
</head><body>
<div id="r-result"><input type="text" id="suggestId" size="20" style="width:500px;height:30px" placeholder="请输入地址"/><input type="button" οnclick="addrSearch()" class="btn btn-danger" value="搜索" style="width: 150px;height: 35px">
</div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
<div id="l-map"></div>
<script type="text/javascript">var marker;var zoomSize = 18;var map = new BMap.Map("l-map");var lon = 116.404; //默认为北京市var lat= 39.915;//业务处理，获取业务中的经纬度，有则处理，没有则用默认北京if(typeof getBizPoint == "function"){var pointJson = getBizPoint();lon = pointJson.lon;lat = pointJson.lat;}//确定中心位置var point = new BMap.Point(lon, lat);map.centerAndZoom(point, zoomSize);//标注marker = new BMap.Marker(point);// 创建标注marker.addEventListener("dragend", setBizValue);// 添加带有定位的导航控件var navigationControl = new BMap.NavigationControl({// 靠左上角位置anchor: BMAP_ANCHOR_TOP_LEFT,// LARGE类型type: BMAP_NAVIGATION_CONTROL_LARGE,// 启用显示定位enableGeolocation: true});//输入地址事件处理 startvar 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 G(id) {return document.getElementById(id);}//业务方法 start//根据事件，设置经纬度和地址function setBizValue(e){var point = e.point;setBizValueForPoint(point);}
</script>
</body>
</html>
转载于:https://www.cnblogs.com/fjkgrbk/p/baidu_map.html
使用百度地图实现详细地址自动补全相关推荐
- Chrome for Android AutoComplete地址栏地址自动补全功能调研和更新
Chrome地址栏地址自动补全功能调研和更新 我的博客对应文章地址 Chrome地址栏地址自动补全功能预览 补全前提: 1. 使用Gboard输入法 2. Gboard输入法打开了[文字更正]功能里面 ...
- ES 7.X 做类百度搜索，进行搜索自动补全和热搜词及拼音功能实现
文章目录 前言 一.如何使用ES做类似百度的检索? 二.全文检索自动补齐 1.创建索引 2.添加数据 3.高级检索 三 热搜词 1.思路 2.DSL语句 3.java代码实现 四 拼音补全 1.DSL ...
- elasticsearch模仿淘宝、京东、百度、谷歌搜索，自动补全、自动完成
Elasticsearch(简称es)是一款功能强大的开源分布式实时搜索引擎,在日志分析.企业级搜索.时序分析等领域有广泛应用,几乎是各大公司搜索分析引擎的开源首选方案.本文不讲废话,不谈理论,目的在 ...
- JS 通过百度地图获取详细地址及经纬度
下方代码可以通过百度地图获取到经纬度和详细位置地址 注意: <script type ="text / javascript"src ="http://api.ma ...
- vue 百度地图根据详细地址获取经纬度
前言 业务需求:根据用户输入详细地址,获取地址的经纬度传给后台,但是不要地图. 准备内容 1.安装josnp,解决跨域,不安转会报跨域问题 执行命令: npm install vue-jsonp -- ...
- 仿新浪微博登录的邮箱地址自动补全功能
首先,来看一下登录新浪微博的效果图: 当你开始输入你的电子邮箱前的帐号时,就会出现常用邮箱的列表,并自动补齐. 实现的时候,首先在页面上放一个输入文本框和一个div.将div隐藏: 电子邮件:< ...
- 百度搜索自动补全（百度搜索常见api）
一.百度搜索常用api 百度搜索常用api 一.搜索关键字自动补全 (一)数据源 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=关键词 ...
- 根据ip获取经纬度_PHP使用百度地图获取指定地址坐标：创建AK（图文+视频）
本篇文章主要给大家介绍PHP使用百度地图获取指定地址坐标之创建AK(api key)的方法. 我们在前面的文章[PHP使用腾讯地图获取指定地址坐标:创建key][PHP使用腾讯地图获取指定地址坐标:经 ...
- 根据php经纬度百度地图打点,PHP使用百度地图获取指定地址坐标：经纬度（图文+视频）...
本篇文章主要给大家介绍PHP使用百度地图获取指定地址坐标之经纬度的实现方法. 在之前的文章[PHP使用百度地图获取指定地址坐标:创建AK]中,已经给大家介绍了如何在百度地图开放平台中创建AK(api ...
最新文章
- matlab两个图共用一个x轴_如何在Matlab中插入两个X轴图
- ASP.NET Core 自动刷新JWT Token
- fanuc机器人码垛编程实例_FANUC 机器人码垛编程详细讲解 记得收藏！
- 利用反射对dao层进行重写
- php获取js函数返回的值_最全最详细的PHP面试题(带有答案)
- 基于QGIS初探PostgreSQL的PostGIS插件，包括YUM和编译安装PostGIS
- 以太坊上已有十个DeFi协议的锁仓量超过10亿美元
- 研磨设计模式--外观模式
- DHCP八种报文详解
- 微信HOOK 退出群聊
- 韩国appleid17+认证流程
- 数据结构与算法（陈越版）第一讲 基本概念
- Quantopian单因子分析工具：Alphalens
- MATLAB画图中图形对象、文字标注、希腊字母显示等
- 记一次用python selenium 通过chrome+chromedriver 实现公司内网上网自动登入认证、上班自动登入打卡python脚本笔记
- 根据IP获取城市-新浪ip接口
- 配置Chrome浏览器burpsuite HTTPS抓包
- 【保姆级教程】明明将【微信】装在了D盘，却还疯狂占用C盘空间？
- 学软件开发的理由_成为软件开发人员的8个理由
- 金蝶K3案例教程物料需求计划后台配置