第一種使用 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 = {
// // width: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="{width: -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 = {
// width: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=
"
{width:
-
35, height:
30
}
"/
>
</
bm-marker
>
</
baidu-map
>