前端使用百度地图搜索

使用百度地图根据输入地址搜索且显示经纬度以及根据经纬度显示地址详细信息

<!--HTML代码如下--><div class="add-box-div"><input type="text" id="street" name="address_detail" placeholder="路/弄号"><button class="btn" @click="setPlace()">搜索定位</button><div id="allmap"></div>
</div>
<div class="add-div"><span style="width:50px">经度：</span><input type="text" id="longitude" style="width:150px" /></div>
<div class="add-div" style="margin-left:20px;"><span style="width:50px">维度：</span><input type="text" id="latitude" style="width:150px"/></div>
<button class="btn" style="margin-left:20px;" @click="resetPlace">重置定位</button>

// js代码如下
// 显示地图
showMap: function () {// 创建Map实例let map = new BMap.Map("allmap");// 初始化地图,设置中心点坐标，let point = new BMap.Point(120.21,30.25);map.centerAndZoom(point, 15);map.enableScrollWheelZoom(true)map.enableDoubleClickZoom(true)map.setCurrentCity("杭州"); let marker = new BMap.Marker(point);  map.addOverlay(marker);
},
//根据输入的地址信息进行搜索
setPlace:function () {let map = new BMap.Map("allmap");let point = new BMap.Point(120.21,30.25);map.enableScrollWheelZoom(true)map.enableDoubleClickZoom(true)let province = $.trim($("#province option:selected").text())let city = $.trim($("#city option:selected").text())let myValueif (province == city) {myValue = province+$.trim($("#area option:selected").text())+$.trim($("#street").val())} else {myValue = province+city+$.trim($("#area option:selected").text())+$.trim($("#street").val())}//清除地图上所有覆盖物map.clearOverlays();    let vm = thislet local = new BMap.LocalSearch(map, { //智能搜索onSearchComplete: function () {vm.userlocation = local.getResults().getPoi(0).point;    //获取智能搜索的结果map.centerAndZoom(vm.userlocation, 18);map.addOverlay(new BMap.Marker(vm.userlocation));    //添加标注//经度$("#longitude").val(vm.userlocation.lng)//维度$("#latitude").val(vm.userlocation.lat)}});local.search(myValue);},//逆地址解析 根据经纬度显示详细地址名称resetPlace: function () {let vm = thislet longitude = $("#longitude").val()let latitude = $("#latitude").val()let map = new BMap.Map("allmap");let point = new BMap.Point(longitude,latitude);map.centerAndZoom(point,20)map.enableScrollWheelZoom(true)if(longitude != "" && latitude != ""){map.clearOverlays(); let point = new BMap.Point(longitude,latitude);let geoc = new BMap.Geocoder(); geoc.getLocation(point,function(rs){ let addComp = rs.addressComponents; let site_address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber$('#street').val(site_address)});let marker = new BMap.Marker(point);  map.addOverlay(marker)} else {alert("请输入经纬度");}},

前端使用百度地图搜索相关推荐

前端解决百度地图地址逆解析（BMap.Geocoder()）异步问题
前端解决百度地图地址逆解析(BMap.Geocoder())异步问题需求:将接口返回的坐标数据转换成详细的地址并渲染在页面上问题:页面先渲染,地址后解析,导致渲染时没有数据显示解决方法:new ...
前端关于百度地图JavaScript Api 使用
百度地图 LBS:LocationBusinessServer 基于定义位置的商业服务国内使用该服务的软件主要有:高德地图,百度地图 LBS百度官网网址:百度地图开发平台基础使用步骤一.登录注册 ...
Android百度地图——搜索服务之周边检索
周边检索:根据检索词.中心点地理坐标和半径与发起周边检索. 实现场景:查找以上海市浦东新区为中心,半径为1000米内所有的"浦东发展银行"(搜周边). 实现步骤: 一.前提条件: ...
前端的百度地图的api的使用
1.打开百度地图官方api网页 http://lbsyun.baidu.com/ 2.点击开发文档 3.选择对应的api 4.点击DEMO详情 5.得到源码复制到你的代码中 1 <!DOCTYP ...
java百度地图逆地址解析_web前端通过百度地图API批量逆解析地址
前言最近碰到一个需求,就是将我们系统中要导出一系列的工作数据,这里面有一个需求就是根据工作人员的经纬度去获取他可能的位置.说到这里大家肯定能想到用地图API了,我这里用的是百度地图的API(详情可参 ...
前端基于百度地图实现考勤签到功能
考勤打卡关键点:获取当前位置.设置考勤点.计算两点距离判断是否在范围内. 引入百度地图API <script type="text/javascript" src=" ...
前端调用百度地图API，解决ios上地图不显示、https访问不了等问题
注册申请百度地图ak 不会的童鞋们点链接这里还是说一下注册的时候要注意的白名单填写项,如不确定直接写 * 号下面说具体操作在页面引入js文件 <script type="text ...
jquery 百度地图搜索选址获取经纬度点击任意点获取经纬度
第一步:加载地图的 js 和 jquery 文件 <script type="text/javascript" src="https://api.map.baidu ...
百度地图搜索poi、point、address
function setPlace(dd){ var add="福建省福州市"+$("#sendDistrict").val(); ...

前端使用百度地图搜索

前端使用百度地图搜索相关推荐

最新文章

热门文章