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%;

}