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.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>