百度地图，自动获取定位，拖拽获取地点，模糊查询获取当前位置

先看下效果图，因为没有美化，只是做一下功能。

完整代码如下

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><script src="../../jss/jquery-1.9.1.min.js"></script><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your baidu keys"></script><title>百度地图的定位</title><style type="text/css">input{border:1px solid #dddee1;border-radius:5px;height:30px; width:90%;}</style>
</head>
<body>当前位置：<input  type="text"   id="txtposition" value="正在定位..."/><br /><br /><div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="" style="width:350px;" /></div><div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div><br /><br /><div id="allmap" style="width: 100%;height: 500px;"></div><div id="r-result"></div><script type="text/javascript">// 百度地图API功能var map = new BMap.Map("allmap");var point = new BMap.Point(118.778, 32.05);map.centerAndZoom(point,12);map.enableScrollWheelZoom();                            // 启用滚轮放大缩小map.addControl(new BMap.NavigationControl());           // 启用放大缩小 尺var geolocation = new BMap.Geolocation();//自动定位geolocation.getCurrentPosition(function (r) {console.log(r.point);if(this.getStatus() == BMAP_STATUS_SUCCESS){var mk = new BMap.Marker(r.point);map.addOverlay(mk);//标出所在地map.panTo(r.point);//地图中心移动mk.addEventListener("dragend", showInfo);mk.enableDragging();    //可拖拽var point = new BMap.Point(r.point.lng,r.point.lat);//用所定位的经纬度查找所在地省市街道等信息var gc = new BMap.Geocoder();gc.getLocation(point, function (rs) {console.log(rs);var addComp = rs.addressComponents;console.log(rs.address);//地址信息document.getElementById("txtposition").value = rs.address;// alert(rs.address);//弹出所在地址var label = new BMap.Label(rs.address, { offset: new BMap.Size(20, -10) });map.removeOverlay(mk.getLabel());//删除之前的labelmk.setLabel(label);});function showInfo(e) {var gc = new BMap.Geocoder();gc.getLocation(e.point, function (rs) {var addComp = rs.addressComponents;var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;//获取地址document.getElementById("txtposition").value = rs.address;//画图 ---》显示地址信息var label = new BMap.Label(address, { offset: new BMap.Size(20, -10) });map.removeOverlay(mk.getLabel());//删除之前的labelmk.setLabel(label);});}}else {alert('failed'+this.getStatus());}}, { enableHighAccuracy: true })// 百度地图API功能function G(id) {return document.getElementById(id)}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, 18);map.addOverlay(new BMap.Marker(pp));    //添加标注}var local = new BMap.LocalSearch(map, { //智能搜索onSearchComplete: myFun});local.search(myValue);}</script></body>
</html>

　　注释：上面代码只需自己复制，然后修改下百度的keys就可以了，其他无需修改

转载于:https://www.cnblogs.com/dinghouchuanqi/p/8550339.html

百度地图，自动获取定位，拖拽获取地点，模糊查询获取当前位置相关推荐

html百度地图拖动,百度地图为marker添加拖拽事件
百度的API里面并没有,但是百度的好多方法都和谷歌地图的类似,参照谷歌地图写法,写了一个简单拖拽事件 body, html,#allmap {width: 100%;height: 100%;over ...
百度地图自动检索获取地理位置（经纬度）
百度地图自动检索获取地理位置,含有百度的自动检索和获取当前定位的功能! 我把这个功能单独写了一个界面,给分离了出来!假如项目中地址输入框有一些框架,这个要当心一些,定位会使索引位置发生错乱!注意改动 ...
[android] 百度地图开发 (三).定位当前位置及getLastKnownLocation获取location总为空问题
前一篇百度地图开发讲述"(二).定位城市位置和城市POI搜索",主要通过监听对象MKSearchListener类实现城市兴趣点POI(Point of Intere ...
通过百度地图模糊查询获取详细地址？正则匹配
要求:获取地址的详情? 地图:百度地图准备:你的AK(地址:http://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5),只需要注册申请就可 ...
基于百度地图实现Android定位功能实现（详解+教程）
基于百度地图实现Android定位功能实现(详解+教程) 1.初始化 (一)获取到SHA1 (1)找到View中的Tool Windows并打开Terminal (2)找到你的jdk的bin目录,小编 ...
HTML5接入百度地图并搜索定位
首先我们得去百度那里注册一下,拥有自己的Appkey,连接:http://lbsyun.baidu.com/ 也可以使用别人的,当然最好还是自己去注册比较好. 第二步,在你自己的网页中引入: 下面直接 ...
html5 geolocation 百度地图,html5 geolocation配合百度地图api实现定位
1.了解html5 geolocation HTML5 Geolocation(地理定位)用于定位用户的位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的.=> 使用 ...
[隐私安全]PC端网页版百度地图是如何定位你的真实地址的
本文转载自https://blog.catscarlet.com/201612122637.html 注:本文适用于网页版百度地图,同样适用于阿里的高德地图,以及搜狗地图等. PC端打开网页版百度地图 ...
Android学习-- 基于位置的服务 LBS(基于百度地图Android SDK)--定位SDK
原文:Android学习-- 基于位置的服务 LBS(基于百度地图Android SDK)--定位SDK 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.ne ...
android百度导航实现,Android 集成百度地图实现设备定位
Android 集成百度地图实现设备定位步骤1: 申请android 端SDK : http://lbsyun.baidu.com/ 步骤2: 下载基础版SDK 步骤3: 下载示例程序步骤4: 开 ...

百度地图，自动获取定位，拖拽获取地点，模糊查询获取当前位置

百度地图，自动获取定位，拖拽获取地点，模糊查询获取当前位置相关推荐

最新文章

热门文章