1.index.html里引入標(biāo)簽：
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=yourKey"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
2.新建一個(gè)js文件(mapConf.js)
export default function MapLoader () { // <-- 原作者這里使用的是module.exports
return new Promise((resolve, reject) => {
if (window.AMap) {
resolve(window.AMap)
} else {
var script = document.createElement('script')
script.type = 'text/javascript'
script.async = true
script.src = 'http://webapi.amap.com/maps?v=1.3&callback=initAMap&key=yourKey'
script.onerror = reject
document.head.appendChild(script)
}
window.initAMap = () => {
resolve(window.AMap)
}
})
}
3.將新建的js文件引入地圖頁面
import MapLoader from '../../../common/mapConf' 即:實(shí)例化Amap對(duì)象
初始化顯示map 需要定義center(中心點(diǎn)),zoom(顯示地圖級(jí)別 可以理解為縮放比例）。
MapLoader().then(AMap => {
that.map = new AMap.Map('container', { //“container”是html定義的地圖組件的id
center: [116.42894, 39.894624],
zoom: 15,
resizeEnable: true
})
AMap.plugin([
'AMap.ToolBar',
], function(){
// 在圖面添加工具條控件吆倦，工具條控件集成了縮放蚕泽、平移须妻、定位等功能按鈕在內(nèi)的組合控件
that.map.addControl(new AMap.ToolBar({
// 簡易縮放模式荒吏，默認(rèn)為 false
liteStyle: true
}));
});
//添加多個(gè)點(diǎn)標(biāo)注跟自定義窗體信息方法
this.listenerFuncMap()
}, e => {
})
listenerFuncMap代碼
listenerFuncMap(){
let self =this;
AMapUI.loadUI(['misc/MarkerList', 'overlay/SimpleMarker', 'overlay/SimpleInfoWindow'], function(MarkerList, SimpleMarker, SimpleInfoWindow) {
var markerList = new MarkerList({
//關(guān)聯(lián)的map對(duì)象
map: self.map,
//選中狀態(tài)（通過點(diǎn)擊列表或者marker）時(shí)在Marker和列表節(jié)點(diǎn)上添加的class司倚，可以借此編寫css控制選中時(shí)的展示效果
selectedClassNames: 'my-active',
//返回?cái)?shù)據(jù)項(xiàng)的Id
getDataId: function(dataItem, index) {
//index表示該數(shù)據(jù)項(xiàng)在數(shù)組中的索引位置皿伺，從0開始鸵鸥，如果確實(shí)沒有id妒穴，可以返回index代替
return dataItem.id;
},
//返回?cái)?shù)據(jù)項(xiàng)的位置信息讼油，需要是AMap.LngLat實(shí)例矮台，或者是經(jīng)緯度數(shù)組瘦赫，比如[116.789806, 39.904989]
getPosition: function(dataItem) {
return dataItem.position;
},
//返回?cái)?shù)據(jù)項(xiàng)對(duì)應(yīng)的Marker
getMarker: function(dataItem, context, recycledMarker) {
var label = {
offset: new AMap.Pixel(16, 18), //修改label相對(duì)于marker的位置
};
//存在可回收利用的marker
if (recycledMarker) {
//直接更新內(nèi)容返回
recycledMarker.setLabel(label);
return recycledMarker;
}
//返回一個(gè)新的Marker
if(dataItem.nameDesc=="技師："){
return new AMap.Marker({
label: label,
icon:new AMap.Icon({
image:"http://image.uservices.cn/tmp/uploads/fws/20181214/5c136a64111b8.png",
size:new AMap.Size(50,50),
imageSize:new AMap.Size(50,50)
}),
});
}else{
return new AMap.Marker({
label: label,
icon:new AMap.Icon({
image:dataItem.headerImg?dataItem.headerImg:"http://image.uservices.cn/tmp/uploads/fws/20181214/5c13693c4b239.png",
size:new AMap.Size(50,50),
imageSize:new AMap.Size(50,50)
}),
});
}
},
//返回?cái)?shù)據(jù)項(xiàng)對(duì)應(yīng)的infoWindow
getInfoWindow: function(dataItem, context, recycledInfoWindow) {
if (recycledInfoWindow) {
recycledInfoWindow.setInfoTitle(dataItem.nameDesc+(dataItem.name));
recycledInfoWindow.setInfoBody("<p style='margin: 0;padding: 0;'>"+dataItem.addressDesc+dataItem.address+"</p><p style='margin: 0;padding: 0;'>"+dataItem.lastTimeDesc+dataItem.lastTime+"</p>");
return recycledInfoWindow;
}
return new SimpleInfoWindow({
infoTitle: dataItem.name,
infoBody: dataItem.address,
offset: new AMap.Pixel(0, -30)
});
},
});
//監(jiān)聽選中改變
markerList.on('selectedChanged', function(event, info) {
//console.log(event, info);
});
//構(gòu)建一個(gè)數(shù)據(jù)項(xiàng)數(shù)組，數(shù)據(jù)項(xiàng)本身沒有格式要求，但需要支持下述的getDataId和getPosition
var data = [{
nameDesc:"技師：",
name: "張三",
position: [118.42894, 39.894624],
address:"啦啦啦",
addressDesc:"地址：",
lastTime:"8102-10-17",
lastTimeDesc:"獲取時(shí)間：",
},{
nameDesc:"聯(lián)系人：",
name: "張燕妮",
position: [116.22894, 39.894624],
address:"哈哈哈",
addressDesc:"地址：",
lastTime:"110",
lastTimeDesc:"電話：",
headerImg:""
}];
//展示該數(shù)據(jù)
markerList.render(data);
});
self.map.setFitView(); //是標(biāo)注的點(diǎn)全都自適應(yīng)初始化顯示在地圖上
},
如圖：
clipboard.png
4.em.....奉上所有代碼
<div class="wrapper">
<div id="container"></div>
</div>
</template>
<script>
import MapLoader from '../../../common/mapConf'
import api from '../api/api';
export default {
data() {
return {
center: [116.42894, 39.894624],
zoom: 15,
markers:[],
map:null,
detailData:"",//詳細(xì)信息
}
},
methods:{
initMap(){
this.getEngineerAndCustomerPosFunc()
},
listenerFuncMap(){
let self =this;
AMapUI.loadUI(['misc/MarkerList', 'overlay/SimpleMarker', 'overlay/SimpleInfoWindow'], function(MarkerList, SimpleMarker, SimpleInfoWindow) {
var markerList = new MarkerList({
//關(guān)聯(lián)的map對(duì)象
map: self.map,
//選中狀態(tài)（通過點(diǎn)擊列表或者marker）時(shí)在Marker和列表節(jié)點(diǎn)上添加的class召川，可以借此編寫css控制選中時(shí)的展示效果
selectedClassNames: 'my-active',
//返回?cái)?shù)據(jù)項(xiàng)的Id
getDataId: function(dataItem, index) {
//index表示該數(shù)據(jù)項(xiàng)在數(shù)組中的索引位置，從0開始胸遇，如果確實(shí)沒有id荧呐，可以返回index代替
return dataItem.id;
},
//返回?cái)?shù)據(jù)項(xiàng)的位置信息，需要是AMap.LngLat實(shí)例纸镊，或者是經(jīng)緯度數(shù)組倍阐，比如[116.789806, 39.904989]
getPosition: function(dataItem) {
return dataItem.position;
},
//返回?cái)?shù)據(jù)項(xiàng)對(duì)應(yīng)的Marker
getMarker: function(dataItem, context, recycledMarker) {
var label = {
offset: new AMap.Pixel(16, 18), //修改label相對(duì)于marker的位置
};
//存在可回收利用的marker
if (recycledMarker) {
//直接更新內(nèi)容返回
recycledMarker.setLabel(label);
return recycledMarker;
}
//返回一個(gè)新的Marker
if(dataItem.nameDesc=="技師："){
return new AMap.Marker({
label: label,
icon:new AMap.Icon({
image:"http://image.uservices.cn/tmp/uploads/fws/20181214/5c136a64111b8.png",
size:new AMap.Size(50,50),
imageSize:new AMap.Size(50,50)
}),
});
}else{
return new AMap.Marker({
label: label,
icon:new AMap.Icon({
image:dataItem.headerImg?dataItem.headerImg:"http://image.uservices.cn/tmp/uploads/fws/20181214/5c13693c4b239.png",
size:new AMap.Size(50,50),
imageSize:new AMap.Size(50,50)
}),
});
}
},
//返回?cái)?shù)據(jù)項(xiàng)對(duì)應(yīng)的infoWindow
getInfoWindow: function(dataItem, context, recycledInfoWindow) {
if (recycledInfoWindow) {
recycledInfoWindow.setInfoTitle(dataItem.nameDesc+(dataItem.name));
recycledInfoWindow.setInfoBody("<p style='margin: 0;padding: 0;'>"+dataItem.addressDesc+dataItem.address+"</p><p style='margin: 0;padding: 0;'>"+dataItem.lastTimeDesc+dataItem.lastTime+"</p>");
return recycledInfoWindow;
}
return new SimpleInfoWindow({
infoTitle: dataItem.name,
infoBody: dataItem.address,
offset: new AMap.Pixel(0, -30)
});
},
});
//監(jiān)聽選中改變
markerList.on('selectedChanged', function(event, info) {
//console.log(event, info);
});
//構(gòu)建一個(gè)數(shù)據(jù)項(xiàng)數(shù)組，數(shù)據(jù)項(xiàng)本身沒有格式要求逗威，但需要支持下述的getDataId和getPosition
if(self.detailData){
var data = [{
nameDesc:"技師：",
name: self.detailData.technician.name,
position: [self.detailData.technician.lon, self.detailData.technician.lat],
address:self.detailData.technician.address,
addressDesc:"地址：",
lastTime:self.detailData.technician.lastTime,
lastTimeDesc:"獲取時(shí)間：",
},{
nameDesc:"聯(lián)系人：",
name: self.detailData.account.name,
position: [self.detailData.account.lon, self.detailData.account.lat],
address:self.detailData.account.address,
addressDesc:"地址：",
lastTime:self.detailData.account.mobile,
lastTimeDesc:"電話：",
headerImg:self.detailData.account.avatar_hc
}];
}
//展示該數(shù)據(jù)
markerList.render(data);
});
self.map.setFitView();
},
//初始化獲取位置
getEngineerAndCustomerPosFunc(){
api.getEngineerAndCustomerPosAxios(params).then((res)=>{
if(res.code==200){
this.detailData = res.data;
let that = this;
MapLoader().then(AMap => {
that.map = new AMap.Map('container', {
center: [116.42894, 39.894624],
zoom: 15,
resizeEnable: true
})
AMap.plugin([
'AMap.ToolBar',
], function(){
// 在圖面添加工具條控件峰搪，工具條控件集成了縮放、平移凯旭、定位等功能按鈕在內(nèi)的組合控件
that.map.addControl(new AMap.ToolBar({
// 簡易縮放模式，默認(rèn)為 false
liteStyle: true
}));
});
this.listenerFuncMap()
}, e => {
})
}else{
this.$toast.center("信息獲取失敗")
}
})
}
},
created(){
this.initMap();
document.title = '技師位置';
},
}
</script>
<style scoped>
.wrapper{
position:absolute;
width:100%;
height:100%;
}
#container{
width: 100%;
height: 100%;
}
</style>
