第一种使用 vue-baidu-map 的方法
首先 npm install vue-baidu-map --save
1 全局引入
在main.js 里面引入
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {ak:'2Zvw46SfEejaTIckyE8SwSWxcUkALsxi'}); ak是百度地图秘钥
2 局部引入 （推介使用性能消耗小，局部引入直接把上面的全部注释，然后在html添加ak）
import { BaiduMap, BmScale, BmGeolocation, BmMarker, BmLabel, BmInfoWindow } from 'vue-baidu-map'
export default {
name: "teamCheckWork",
components: {
BaiduMap,
BmScale,
BmGeolocation,
BmMarker,
BmLabel,
BmInfoWindow
},
data() {
return {
signedIn:[], // 已签到数据
onSignedIn:[], // 未签到数据
map_center:{lng:0,lat:0}, // 初始化中心点位置
map_zoom:15, // 初始化地图缩放大小这两个必须有
};
},
}}}}}// 地图初始化
handler({ BMap, map }) {
console.log(BMap, map);
let _this = this //设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例
this.BMap = BMap
this.map = map
console.log(this.map);
// 刚进入页面中的定位，需要向用户授权
let geolocation = new BMap.Geolocation();
let gc = new BMap.Geocoder();
// console.log(geolocation,gc);
// 获取当前的地理位置
geolocation.getCurrentPosition( function(r) {
// if(this.getStatus() == BMAP_STATUS_SUCCESS) {
var pt = r.point;
gc.getLocation(pt, function(rs){
var addComp = rs.addressComponents;
_this.addrPoint.address= addComp.province + addComp.city + addComp.district + addComp.street+addComp.streetNumber;
});
console.log('r.point.lat',r.point.lng,r.point.lat)
this.map_center = r.point
console.log( this.map_center);
_this.addrPoint.lng = r.point.lng;
_this.addrPoint.lat = r.point.lat;
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
_this.getTeamSignIn(this.nowTime);
if(r.accuracy==null){
// alert('accuracy null:'+r.accuracy);
//用户决绝地理位置授权
return;
}
// }else{
// alert('failed'+this.getStatus());
// }
},{enableHighAccuracy: true});
},
// 获取团队考勤记录
getTeamSignIn(time){
let that=this;
this.$http.get("/attendance/getTeamAttendance?attendanceTime=" + time).then(res => {
console.log('res',res);
this.getTeamSignInHistory= res;
// console.log(this.getTeamSignInHistory);
if(this.getTeamSignInHistory.length>0){
console.log('aaaaaa');
this.getTeamSignInHistory.forEach((item,index)=>{
item.status? this.signedIn.push(item): this.onSignedIn.push(item);
});
//
this.signedIn=[ /模拟数据获取直接按照格式赋值就会在地图上显示出点 :position="{lng:item.SignInLongitude, lat:item.SignInLatitude}" v-for="(item,index) in signedIn"
{
EmployeeName:'张一',
SignInAddress:'大剧院',
SignInLatitude: '38.465846',
SignInLongitude: '112.736636',
SignInTime:'2020-9-29',
status:1,
userid:'26b6c76b-4cf9-4416-ae92-b4268b9f9185'
},
{
EmployeeName:'张二',
SignInAddress:'海底',
SignInLatitude: '38.454601',
SignInLongitude: '112.730671',
SignInTime:'2020-9-29',
status:1,
userid:'26b6c76b-4cf9-4416-ae92-b4268b9f9185'
},
{
EmployeeName:'张三',
SignInAddress:'南城',
SignInLatitude: '38.449515',
SignInLongitude: '112.728228',
SignInTime:'2020-9-29',
status:1,
userid:'26b6c76b-4cf9-4416-ae92-b4268b9f9185'
}
],
console.log('signedIn',this.signedIn);
console.log(this.map);
// this.signedIn.forEach((items,index)=>{
// console.log(items);
// //把获取回来的点添加到地图上
// console.log(that.map);
// // console.log(window)
// var points = new BMap.Point(items.SignInLongitude,items.SignInLatitude);//创建坐标点
// var label = new BMap.Label(items.EmployeeName,{
// offset:new BMap.Size(25,5)
// });
// // var opts = {
// // 250,
// // height: 100,
// // title:item.EmployeeName
// // };
// // var infoWindows = new BMap.InfoWindow(item.EmployeeName,opts);
// // markerFun(points,label,infoWindows);
// this.addMarker(points,label);
// });
}else{
this.$toast("当前时间还未有人提交考勤记录");
}
}) .catch(err => {
this.$toast(err);
});
}
《html》
<baidu-map class="map map-content" :center="map_center" :zoom="map_zoom" @ready="handler" :style="{height:height}" :double-click-zoom="false" ak="2Zvw46SfEejaTIckyE8SwSWxcUkALsxi"> <bm-marker :position="{lng:item.SignInLongitude, lat:item.SignInLatitude}" v-for="(item,index) in signedIn" :key="index" animation="BMAP_ANIMATION_BOUNCE"> <bm-label :content="item.EmployeeName" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{ -35, height: 30}"/> </bm-marker> </baidu-map>
第二种直接引用百度地图
1这种只有一种引用方式直接在哪里用就在哪里引用
html
<div class="map-content"id="map-container" :style="{height:height}"></div>
注意：一定要加高度不然会不显示
async mounted() {
await MP('2Zvw46SfEejaTIckyE8SwSWxcUkALsxi') //加载引入地图，参数是秘钥
this.initMap();
},
// 初始化地图获取当前定位点
initMap() {
var that = this;
// 刚进入页面中的定位，需要向用户授权
let geolocation = new BMap.Geolocation();
let gc = new BMap.Geocoder();
// console.log(geolocation,gc);
// 获取当前的地理位置
geolocation.getCurrentPosition( function(r) {
// if(this.getStatus() == BMAP_STATUS_SUCCESS) {
var pt = r.point;
gc.getLocation(pt, function(rs){
var addComp = rs.addressComponents;
that.addrPoint.address= addComp.province + addComp.city + addComp.district + addComp.street+addComp.streetNumber;
});
// console.log('r.point.lat',r.point.lng,r.point.lat)
that.addrPoint.lng = r.point.lng;
that.addrPoint.lat = r.point.lat;
that.generatingMaps(r.point)
if(r.accuracy==null){
// alert('accuracy null:'+r.accuracy);
//用户决绝地理位置授权
return;
}
// }else{
// alert('failed'+this.getStatus());
// }
},{enableHighAccuracy: true});
},
// 生成当前位置的地图并添加初始化点
generatingMaps(value){
var map = new BMap.Map("map-container", {enableMapClick:false,minZoom:15,maxZoom:20}) //新建地图实例，enableMapClick:false ：禁用地图默认点击弹框,minZoom地图最大最小实例
var point = new BMap.Point( value.lng,value.lat);
map.centerAndZoom(point,17);
let marker = new BMap.Marker(new BMap.Point( value.lng,value.lat)); // 创建点
map.addOverlay(marker);
},
// 获取数据
getTeamSignIn(time){
this.$http.get("/attendance/getTeamAttendance?attendanceTime=" + time).then(res => {
console.log('res',res);
this.getTeamSignInHistory= res;
// console.log(this.getTeamSignInHistory);
if(this.getTeamSignInHistory.length>0){
console.log('aaaaaa');
this.getTeamSignInHistory.forEach((item,index)=>{
item.status? this.signedIn.push(item): this.onSignedIn.push(item);
});
this.signedIn=[
{
EmployeeName:'张一',
SignInAddress:'大剧院',
SignInLatitude: '38.465846',
SignInLongitude: '112.736636',
SignInTime:'2020-9-29',
status:1,
userid:'26b6c76b-4cf9-4416-ae92-b4268b9f9185'
},
{
EmployeeName:'张二',
SignInAddress:'海底',
SignInLatitude: '38.454601',
SignInLongitude: '112.730671',
SignInTime:'2020-9-29',
status:1,
userid:'26b6c76b-4cf9-4416-ae92-b4268b9f9185'
},
{
EmployeeName:'张三',
SignInAddress:'南城',
SignInLatitude: '38.449515',
SignInLongitude: '112.728228',
SignInTime:'2020-9-29',
status:1,
userid:'26b6c76b-4cf9-4416-ae92-b4268b9f9185'
}
],
console.log('signedIn',this.signedIn);
console.log(this.map);
this.signedIn.forEach((items,index)=>{
console.log(items);
//把获取回来的点添加到地图上
console.log(that.map);
// console.log(window)
var points = new BMap.Point(items.SignInLongitude,items.SignInLatitude);//创建坐标点
var label = new BMap.Label(items.EmployeeName,{
offset:new BMap.Size(25,5)
});
// var opts = {
// 250,
// height: 100,
// title:item.EmployeeName
// };
// var infoWindows = new BMap.InfoWindow(item.EmployeeName,opts);
// markerFun(points,label,infoWindows);
this.addMarker(points,label);
});
}else{
this.$toast("当前时间还未有人提交考勤记录");
}
}) .catch(err => {
this.$toast(err);
});
}
// 调用添加多个标注
addMarker(points,label){
let that=this; // 注意this指向问题指向map
console.log(points,label);
var markers = new BMap.Marker(points);
that.map.addOverlay(markers);
markers.setLabel(label);
// markers.addEventListener("click",function (event) {
// console.log("0001");
// map.openInfoWindow(infoWindows,points);//参数：窗口、点 根据点击的点出现对应的窗口
// });
},
<baidu-map class="map map-content" :center="map_center" :zoom="map_zoom" @ready="handler" :style="{height:height}" :double-click-zoom="false" ak="2Zvw46SfEejaTIckyE8SwSWxcUkALsxi">
<bm-marker :position="{lng:item.SignInLongitude, lat:item.SignInLatitude}" v-for="(item,index) in signedIn" :key="index" animation="BMAP_ANIMATION_BOUNCE">
<bm-label :content="item.EmployeeName" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{ -35, height: 30}"/>
</bm-marker>
</baidu-map>