vue 百度地图 使用 vue-baidu-map 进行当前位置定位和范围展示

最近写项目的时候，做到了考勤打卡的模块内容，需要选择考勤打卡的位置信息以及打卡的范围展，所以做出以下的记录，方便大家参考学习（如下图展示）

一、创建百度地图账号，获取秘钥

首先得有百度地图的账号，点此链接（百度地图）

二、 引入插件

1、安装vue-baidu-map

npm install vue-baidu-map --save

2、在main.js中引入

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {ak: '此处为百度地图申请的密钥'
})

三、 简单使用

以下就不多介绍了，直接上完整代码

// 引入
npm install vue-baidu-map --save

引入map.vue页面

// point传值  gainLocation 获取点位的信息
<map :point="point"  @gainLocation="gainLocation" ></map>data() {return {point:{"lng": 120.306731,  //坐标"lat": 31.581733, value:'三阳广场',    // 位置信息scope:50			// 范围}}},gainLocation(row){console.log(row)}

创建map.vue页面

<template><div><el-button @click="open">打开地图</el-button<el-dialog title="地图" :visible.sync="dialogs" v-if="dialogs" ><div><el-autocomplete style="width: 100%" :popper-append-to-body="false"v-model="value" :fetch-suggestions="querySearchAsync" :trigger-on-focus="false" placeholder="输入地址查找点位信息"@select="handleSelect" ><i slot="prefix" class="el-input__icon el-icon-search"></i><template slot-scope="{ item }"><div class="flexs"><i class="el-icon-location" style="font-size:25px;color:#409eff"></i><div style="margin-left:15px" class="flcol"><span style="color:#409eff;">{{ item.title }}</span><span style="color:#999">{{ item.address }}</span></div></div></template></el-autocomplete></div><div ><baidu-map class="map"  :center="circleCenter" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler" /></div><span slot="footer" class="dialog-footer"><el-button @click="subMit" type="primary">确 定</el-button><el-button @click="dialogs = false">取消</el-button></span></el-dialog></div>
</template><script>
import { BaiduMap, } from "vue-baidu-map";
export default {components: {BaiduMap,},props:['point'],data() {return {dialogs: false,value: '',circleCenter: { // 点位信息lng: 116.404,lat: 39.915},map: {},scope:50, // 范围zoom:20,  // 地图 视线大小circleStyle:{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3},}},mounted() {//通过浏览器的Geolocation API获取经纬度if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(this.showPosition);} else {console.log("Geolocation is not supported by this browser.");}},methods: {showPosition(position) {const latitude = position.coords.latitude;const longitude = position.coords.longitude;this.circleCenter = {lng: longitude,lat: latitude,};},handler({ BMap, map }) {let that = this// 此处是根据组件传递展示范围和定位信息 （根据自己要求更改）if (that.point) {that.circleCenter = {lng: that.point.lng,lat: that.point.lat}that.value = that.point.valuethat.scope = that.point.scopemap.centerAndZoom(new BMap.Point(that.circleCenter.lng, that.circleCenter.lat));var marks = new BMap.Marker(this.circleCenter); map.addOverlay(marks); var circle = new BMap.Circle(that.circleCenter,that.scope,that.circleStyle);map.addOverlay(circle);}that.map = map;var geocoder = new BMap.Geolocation(); //通过百度地图 创建地址解析器的实例   获取经纬度geocoder.getCurrentPosition(function (res) {var point = res.pointconst currentLocation = [res.longitude, res.latitude];console.log( "当前位置经纬度", currentLocation,res.address.province, res.address.city);if (!that.point) {var gc = new BMap.Geocoder(); gc.getLocation(point,function(rs){that.value = rs.address})that.circleCenter = {lng: currentLocation[0],lat: currentLocation[1],};map.centerAndZoom(new BMap.Point(currentLocation[0], currentLocation[1]));var marks = new BMap.Marker(point); map.addOverlay(marks); var circle = new BMap.Circle(that.circleCenter,that.scope,that.circleStyle);map.addOverlay(circle);}});},open() {this.dialogs = true},   querySearchAsync(str, cb) {var options = {onSearchComplete: function (res) {console.log(res,111);//检索完成后的回调函数var s = [];if (local.getStatus() == BMAP_STATUS_SUCCESS) {for (var i = 0; i < res.getCurrentNumPois(); i++) {s.push(res.getPoi(i));}cb(s); //获取到数据时，通过回调函数cb返回到<el-autocomplete>组件中进行显示} else {cb(s);}},};var local = new BMap.LocalSearch(this.map, options); //创建LocalSearch构造函数local.search(str); //调用search方法，根据检索词str发起检索console.log(str);},handleSelect(item) {let that = thisthat.value = item.address +'-' +item.title; //记录详细地址，含建筑物名that.circleCenter = { //记录当前选中地址坐标lng: item.point.lng,lat: item.point.lat,};that.map.clearOverlays(); //清除地图上所有覆盖物const marks = new BMap.Marker(item.point); //根据所选坐标重新创建Markerthat.map.addOverlay(marks); //将覆盖物重新添加到地图中that.map.panTo(item.point); //将地图的中心点更改为选定坐标点const circle = new BMap.Circle(that.circleCenter,that.scope,that.circleStyle);that.map.addOverlay(circle);},subMit(){const obj = { ...this.circleCenter,value:this.value }this.$alert(obj)this.$emit('gainLocation',obj)}}
}
</script><style scoped>
.map {margin-top: 20px;width: 100%;height: 300px;
}.flexs {display: flex;align-items: center;width: 100%;border-bottom: 1px solid #f5f5f5;
}
.flcol{display: flex;flex-direction: column;
}
</style>