vue 百度地图 使用 vue-baidu-map 进行当前位置定位和范围展示（考勤打卡）
- 一、创建百度地图账号，获取秘钥
- 二、 引入插件
- 1、安装vue-baidu-map
- 2、在main.js中引入
- 三、 简单使用
最近写项目的时候，做到了考勤打卡的模块内容，需要选择考勤打卡的位置信息以及打卡的范围展，所以做出以下的记录，方便大家参考学习（如下图展示）
一、创建百度地图账号，获取秘钥
首先得有百度地图的账号，点此链接（百度地图）
二、 引入插件
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.value
that.scope = that.point.scope
map.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.point
const 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 = this
that.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); //根据所选坐标重新创建Marker
that.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>
