北京做网站公司哪家好,义乌建设网站,用vue开发好看的官网,企业网络搭建与应用试题及答案vue 百度地图 使用 vue-baidu-map 进行当前位置定位和范围展示#xff08;考勤打卡#xff09; 一、创建百度地图账号#xff0c;获取秘钥二、 引入插件1、安装vue-baidu-map2、在main.js中引入 三、 简单使用 最近写项目的时候#xff0c;做到了考勤打卡的模块内容#x… vue 百度地图 使用 vue-baidu-map 进行当前位置定位和范围展示考勤打卡 一、创建百度地图账号获取秘钥二、 引入插件1、安装vue-baidu-map2、在main.js中引入 三、 简单使用 最近写项目的时候做到了考勤打卡的模块内容需要选择考勤打卡的位置信息以及打卡的范围展所以做出以下的记录方便大家参考学习如下图展示 一、创建百度地图账号获取秘钥
首先得有百度地图的账号点此链接百度地图
二、 引入插件
1、安装vue-baidu-map
npm install vue-baidu-map --save2、在main.js中引入
import Vue from vue
import BaiduMap from vue-baidu-mapVue.use(BaiduMap, {ak: 此处为百度地图申请的密钥
})三、 简单使用
以下就不多介绍了直接上完整代码
// 引入
npm install vue-baidu-map --save引入map.vue页面
// point传值 gainLocation 获取点位的信息
map :pointpoint gainLocationgainLocation /mapdata() {return {point:{lng: 120.306731, //坐标lat: 31.581733, value:三阳广场, // 位置信息scope:50 // 范围}}},gainLocation(row){console.log(row)}创建map.vue页面
templatedivel-button clickopen打开地图/el-buttonel-dialog title地图 :visible.syncdialogs v-ifdialogs divel-autocomplete stylewidth: 100% :popper-append-to-bodyfalsev-modelvalue :fetch-suggestionsquerySearchAsync :trigger-on-focusfalse placeholder输入地址查找点位信息selecthandleSelect i slotprefix classel-input__icon el-icon-search/itemplate slot-scope{ item }div classflexsi classel-icon-location stylefont-size:25px;color:#409eff/idiv stylemargin-left:15px classflcolspan stylecolor:#409eff;{{ item.title }}/spanspan stylecolor:#999{{ item.address }}/span/div/div/template/el-autocomplete/divdiv baidu-map classmap :centercircleCenter :zoomzoom :scroll-wheel-zoomtrue readyhandler //divspan slotfooter classdialog-footerel-button clicksubMit typeprimary确 定/el-buttonel-button clickdialogs false取消/el-button/span/el-dialog/div
/templatescript
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)}}
}
/scriptstyle 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
