html电脑添加高德地图,vue-cli项目h5页面或者PC端页面引入高德地图组件，多点标注，自定义弹窗的详细描述...
1.index.html里引入標簽：
2.新建一個js文件(mapConf.js)
export default function MapLoader () { //
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' 即:實例化Amap對象
初始化顯示map 需要定義center(中心點),zoom(顯示地圖級別 可以理解為縮放比例)。
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(){
// 在圖面添加工具條控件，工具條控件集成了縮放、平移、定位等功能按鈕在內的組合控件
that.map.addControl(new AMap.ToolBar({
// 簡易縮放模式，默認為 false
liteStyle: true
}));
});
//添加多個點標注跟自定義窗體信息方法
this.listenerFuncMap()
}, e => {
})
listenerFuncMap代碼
listenerFuncMap(){
let self =this;
AMapUI.loadUI(['misc/MarkerList', 'overlay/SimpleMarker', 'overlay/SimpleInfoWindow'], function(MarkerList, SimpleMarker, SimpleInfoWindow) {
var markerList = new MarkerList({
//關聯的map對象
map: self.map,
//選中狀態(通過點擊列表或者marker)時在Marker和列表節點上添加的class，可以借此編寫css控制選中時的展示效果
selectedClassNames: 'my-active',
//返回數據項的Id
getDataId: function(dataItem, index) {
//index表示該數據項在數組中的索引位置，從0開始，如果確實沒有id，可以返回index代替
return dataItem.id;
},
//返回數據項的位置信息，需要是AMap.LngLat實例，或者是經緯度數組，比如[116.789806, 39.904989]
getPosition: function(dataItem) {
return dataItem.position;
},
//返回數據項對應的Marker
getMarker: function(dataItem, context, recycledMarker) {
var label = {
offset: new AMap.Pixel(16, 18), //修改label相對于marker的位置
};
//存在可回收利用的marker
if (recycledMarker) {
//直接更新內容返回
recycledMarker.setLabel(label);
return recycledMarker;
}
//返回一個新的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)
}),
});
}
},
//返回數據項對應的infoWindow
getInfoWindow: function(dataItem, context, recycledInfoWindow) {
if (recycledInfoWindow) {
recycledInfoWindow.setInfoTitle(dataItem.nameDesc+(dataItem.name));
recycledInfoWindow.setInfoBody("
"+dataItem.addressDesc+dataItem.address+"
"+dataItem.lastTimeDesc+dataItem.lastTime+"
");return recycledInfoWindow;
}
return new SimpleInfoWindow({
infoTitle: dataItem.name,
infoBody: dataItem.address,
offset: new AMap.Pixel(0, -30)
});
},
});
//監聽選中改變
markerList.on('selectedChanged', function(event, info) {
//console.log(event, info);
});
//構建一個數據項數組，數據項本身沒有格式要求，但需要支持下述的getDataId和getPosition
var data = [{
nameDesc:"技師：",
name: "張三",
position: [118.42894, 39.894624],
address:"啦啦啦",
addressDesc:"地址：",
lastTime:"8102-10-17",
lastTimeDesc:"獲取時間：",
},{
nameDesc:"聯系人：",
name: "張燕妮",
position: [116.22894, 39.894624],
address:"哈哈哈",
addressDesc:"地址：",
lastTime:"110",
lastTimeDesc:"電話：",
headerImg:""
}];
//展示該數據
markerList.render(data);
});
self.map.setFitView(); //是標注的點全都自適應初始化顯示在地圖上
},
如圖：
clipboard.png
4.em.....奉上所有代碼
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:"",//詳細信息
}
},
methods:{
initMap(){
this.getEngineerAndCustomerPosFunc()
},
listenerFuncMap(){
let self =this;
AMapUI.loadUI(['misc/MarkerList', 'overlay/SimpleMarker', 'overlay/SimpleInfoWindow'], function(MarkerList, SimpleMarker, SimpleInfoWindow) {
var markerList = new MarkerList({
//關聯的map對象
map: self.map,
//選中狀態(通過點擊列表或者marker)時在Marker和列表節點上添加的class，可以借此編寫css控制選中時的展示效果
selectedClassNames: 'my-active',
//返回數據項的Id
getDataId: function(dataItem, index) {
//index表示該數據項在數組中的索引位置，從0開始，如果確實沒有id，可以返回index代替
return dataItem.id;
},
//返回數據項的位置信息，需要是AMap.LngLat實例，或者是經緯度數組，比如[116.789806, 39.904989]
getPosition: function(dataItem) {
return dataItem.position;
},
//返回數據項對應的Marker
getMarker: function(dataItem, context, recycledMarker) {
var label = {
offset: new AMap.Pixel(16, 18), //修改label相對于marker的位置
};
//存在可回收利用的marker
if (recycledMarker) {
//直接更新內容返回
recycledMarker.setLabel(label);
return recycledMarker;
}
//返回一個新的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)
}),
});
}
},
//返回數據項對應的infoWindow
getInfoWindow: function(dataItem, context, recycledInfoWindow) {
if (recycledInfoWindow) {
recycledInfoWindow.setInfoTitle(dataItem.nameDesc+(dataItem.name));
recycledInfoWindow.setInfoBody("
"+dataItem.addressDesc+dataItem.address+"
"+dataItem.lastTimeDesc+dataItem.lastTime+"
");return recycledInfoWindow;
}
return new SimpleInfoWindow({
infoTitle: dataItem.name,
infoBody: dataItem.address,
offset: new AMap.Pixel(0, -30)
});
},
});
//監聽選中改變
markerList.on('selectedChanged', function(event, info) {
//console.log(event, info);
});
//構建一個數據項數組，數據項本身沒有格式要求，但需要支持下述的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:"獲取時間：",
},{
nameDesc:"聯系人：",
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
}];
}
//展示該數據
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(){
// 在圖面添加工具條控件，工具條控件集成了縮放、平移、定位等功能按鈕在內的組合控件
that.map.addControl(new AMap.ToolBar({
// 簡易縮放模式，默認為 false
liteStyle: true
}));
});
this.listenerFuncMap()
}, e => {
})
}else{
this.$toast.center("信息獲取失敗")
}
})
}
},
created(){
this.initMap();
document.title = '技師位置';
},
}
.wrapper{
position:absolute;
width:100%;
height:100%;
}
#container{
width: 100%;
height: 100%;
}
總結
以上是生活随笔為你收集整理的html电脑添加高德地图,vue-cli项目h5页面或者PC端页面引入高德地图组件，多点标注，自定义弹窗的详细描述...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 地理空间数据免费获取（一）
- 下一篇： vue使用高德地图API,定位，搜索，拖