百度地图 baidu-map 地图根据范围画圈

需求：
1.输入地址联想相关地址
2.点击地图获取位置经纬度和地点名
3.根据中心点设置标注
4.输入地址后，在输入框输入范围（多少米），根据范围在地图上画圈

html:

<div class="first-section"><div class='address'><el-form-item label="移动端打卡中心位置" prop="name"><!-- <div class="app-container"> --><el-autocomplete v-model="addressForm.name" :fetch-suggestions="querySearch" clearableplaceholder="请输入详细地址" style="width: 100%" :trigger-on-focus="false"@select="handleSelect"  @clear='toClear'/><!-- </div> --></el-form-item></div><div><baidu-map ref="bCircleMap" style="width:900px;height:350px" :scroll-wheel-zoom="true" :center="mapCenter" :inertial-dragging="false":zoom="mapZoom" @ready="handler" ak="btN86TKzCHfZyiE3t4bq5kHSPw1j9TRh" @click="getClickInfo"><bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation><bm-marker :position="{lng: mapCenter.lng, lat: mapCenter.lat}" @click="getClickInfo"></bm-marker><!-- 比例尺控件，注册此组件才会在地图上显示比例尺 --><bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale><!-- 缩放控件，注册此组件才会显示拖放进度 --><bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation><bm-circle :center="mapCenter" :radius="addressForm.range" :stroke-opacity="0.5" fill-color="#39B1FC" :fill-opacity="0.3":stroke-weight="2" stroke-color="#0000ff" @lineupdate="updateCirclePath" :editing="false" v-if='addressForm.range'></bm-circle></baidu-map></div><div style='margin-top:22px;'><el-form-item label="允许打卡范围:" prop='range'><el-input placeholder="请输入数字" clearable v-model="addressForm.range" type='number' @input="handleInput1"></el-input><span style='display: block;margin-left: 10px;width: 100px;'>米以内</span></el-form-item></div></div>

js:

updateCirclePath(e) {let _self = this;let map = this.map;let BMap = this.BMap;let radius = e.target.getRadius();//获取圆半径（单位米，可利用BMapLib.DistanceTool工具自定义单位）let center = e.target.getCenter();//获取圆心坐标let bounds = e.target.getBounds().getNorthEast();//获取圆可视范围东北角坐标// 覆盖物的属性发生变化时触发this.addressForm.range = e.target.getRadius();this.mapCenter = e.target.getCenter()if(_self.overlayLabel != null){map.removeOverlay(_self.overlayLabel);}//生成Label覆盖层var point = new BMap.Point(bounds.lng, center.lat);_self.overlayLabel = new BMap.Label("半径:"+ radius + "m",{offset:new BMap.Size(20,-10),position: point || e.target.rc[1].point});//添加覆盖层map.addOverlay(_self.overlayLabel);},handler({BMap,map}) {this.BMap = BMapthis.map = mapthis.geoc = new BMap.Geocoder() // 地址解析对象map.setDefaultCursor("crosshair");if (this.mapLocation.coordinate && this.mapLocation.coordinate.lng) {this.mapCenter.lng = this.mapLocation.coordinate.lngthis.mapCenter.lat = this.mapLocation.coordinate.latthis.mapZoom = 14// map.addOverlay(new this.BMap.Marker(this.mapLocation.coordinate))} else {this.mapCenter.lng = 116.404this.mapCenter.lat = 39.915this.mapZoom =14}}, makerCenter(point) {if (this.map) {this.map.clearOverlays()// this.map.addOverlay(new this.BMap.Marker(point))this.mapCenter.lng = point.lngthis.mapCenter.lat = point.latthis.mapZoom = 15}},// 点击地图getClickInfo(e) {// 此时已经可以获取到BMap类if (this.BMap) {this.mapCenter.lng = e.point.lngthis.mapCenter.lat = e.point.latconst that = this// Geocoder() 类进行地址解析// 创建地址解析器的实例const geoCoder = new this.BMap.Geocoder()// getLocation() 类--利用坐标获取地址的详细信息// getPoint() 类--获取位置对应的坐标geoCoder.getLocation(e.point, function(res) {const addrComponent = res.addressComponentsconst surroundingPois = res.surroundingPoisconst province = addrComponent.provinceconst city = addrComponent.cityconst district = addrComponent.districtlet addr = addrComponent.streetif (surroundingPois.length > 0 && surroundingPois[0].title) {if (addr) {addr += `-${surroundingPois[0].title}`} else {addr += `${surroundingPois[0].title}`}} else {addr += addrComponent.streetNumber}that.choosedLocation = {province,city,district,addr,...that.center}if (province === city) {that.pointAddress = province + district + addr} else {that.pointAddress = province + city + district + addr}that.addressForm.name = that.pointAddress})}},// 搜索框搜索地点querySearch(queryString, cb) {var that = thisvar myGeo = new this.BMap.Geocoder()myGeo.getPoint(queryString, function(point) {if (point) {that.mapLocation.coordinate = pointthat.makerCenter(point)that.mapCenter.lng = point.lngthat.mapCenter.lat = point.lat} else {that.mapLocation.coordinate = null}}, this.locationCity)var options = {onSearchComplete: function(results) {if (local.getStatus() === 0) {// 判断状态是否正确var s = []for (var i = 0; i < results.getCurrentNumPois(); i++) {var x = results.getPoi(i)var xvalue;if (x.address === x.title) {xvalue = x.address} else {xvalue = x.address + x.title}var xitem = {value: xvalue,point: x.point}s.push(xitem)cb(s)}} else {cb()}}}var local = new this.BMap.LocalSearch(this.map, options)local.search(queryString)},

百度地图 baidu-map 地图根据范围画圈相关推荐

pyecharts绘制省级地图（Map地图、Geo动态涟漪散点图、Geo动态轨迹图）
Ⅰ.原始数据第七次全国人口普查(广东人口数据) 数据来源:广东统计年鉴城市人口广州市 18676605 深圳市 17560061 珠海市 2439585 汕头市 5502031 佛山市 949 ...
echaer 地图_echarts Map(地图) 不同颜色区块显示
echarts Map(地图) 不同区块显示这里以重庆地图为例配置项: var option = { title : { text: '重庆市', subtext: '', x:'left' }, ...
Vue Baidu Map 实现Vue版本地图轨迹回放（App端）
Vue Baidu Map 地图轨迹回放 Vue Baidu Map 简介 Vue Baidu Map 安装 1.NPM 2.CDN Vue Baidu Map 引用 BmlLushu 引用 BmlL ...
百度地图完全模仿链家找房，三级下钻联动聚合，画圈找房！
废话不多说,说一下功能点,具体有需要请下载源码直接运行观看! 主要功能点 1.以北京为基础,区->街道->小区,三级下钻联动. 2.根据地图视野动态加载相应点位,以此来提高性能. 3.画圈 ...
怎样在百度地图上画圈_知识地图分享：你不是记忆差，你只是没找对方法
生活的朋友都想拥有过目不忘的超能力,渴望挥手告别疯狂重复却很难记住的困境.超强的记忆力在上学与工作中都发挥着重要的作用. 多年前有一部港剧<读心神探>,里面的男主角姚学琛年少时学习差劲,被 ...
高德h5地图api接口_html5通过腾讯地图、高德地图、百度地图开发api接口获取坐标对应的周边信息...
在通过 geolocation 获取到当前的 GPS 坐标后,需要通过"逆地理位置解析"才能得到街道对应的街道.建筑物.周边等相关信息. 下面我使用国内的三家主要的地图厂商(腾讯地 ...
基于ArcGIS API for JavaScript加载百度各种类型切片地图
文章目录应用场景需求分析效果图实现代码原理解读应用场景部分项目基于ArcGIS平台,但是甲方只提供部分矢量数据,用作底图的地形图数据没有,表示可以使用百度地图作为底图.所以才会有使用Ar ...
Windows Store Javascript项目使用高德地图、谷歌地图、百度地图API
Windows Store Javascript项目使用高德地图.谷歌地图.百度地图API 原文 Windows Store Javascript项目使用高德地图.谷歌地图.百度地图API 在Win8 ...
百度地图API实现地图应用
企业官网上需要用到地图应用,这里对百度地图API的使用做点笔记,好记性不如烂笔头. 实现地图应用的流程如下: 1.获取密钥:教程网址 https://jingyan.baidu.com/article ...
通过腾讯地图、高德地图、百度地图开发接口获取坐标对应的周边相关信息
通过腾讯地图.高德地图.百度地图开发接口获取坐标对应的周边相关信息更新: 以前出于好意暴露了个人的KEY,现已被烂用.为不影响您的业务,请使用我的KEY的朋友去申请自己的KEY,我的KEY将在不久后 ...

百度地图 baidu-map 地图根据范围画圈

百度地图 baidu-map 地图根据范围画圈相关推荐

最新文章

热门文章