vue使用高德amap原生js开发，在地图上添加marker点及label文本框
参考地址：https://lbs.amap.com/api/javascript-api/guide/map/lifecycle
这里直接上代码
loadEmployeeData(){
var params={}
params.mapType="arcgis_tianditu_online"
var empData=[];
//获取接口数据
this.loadMapEmployeeData(params).then(res=>{
empData=res
for(let i=0;i<empData.length;i++){
let tempobj=empData[i]
if(tempobj.lat!=0&tempobj.lng!=0&tempobj.lat!=""&tempobj.lng!=""){
//这里需要判断一下坐标，如果没有坐标，加载的时候会报错
this.empMarkers.push(tempobj)
}
}
this.loadMarkers(this.empMarkers,"emp")
})
},
//加载marker点
loadMarkers(Markerdata,Mtype){
var gmarker;
var _this=this;
// map.clearMap() //加载marker点时先清地图
Markerdata.forEach(function(marker,i) {
gmarker=new AMap.Marker({
map: _this.gmap,
icon: marker.icon,
position: marker.position,
offset: new AMap.Pixel(-13, -30)//往左往上
});
_this.gmap.add(gmarker);
//定位图片下方标注
gmarker.setLabel({
offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
content: "<div>"+marker.name+"</div>", //设置文本标注内容
direction: 'bottom' //设置文本标注方位
});
}
});
到这里，marker点及label就能正常显示了，但是这里发现原生的label样式太丑了，这里我们需要自己定义一下样式，如下：
#container .amap-marker-label{
position: absolute;
z-index: 2;
border: 1px solid #ccc;
background-color: blue;
white-space: nowrap;
cursor: default;
padding: 3px;
font-size: 12px;
line-height: 14px;
color: #fff;
margin-left: -2px;
}
.amap-icon img{
width: 25px;
height: 34px;
}
.amap-marker img{
width: 25px;
height: 34px;
}
修改后，marker点及label就好看多了，实现效果如下图：
当然如果你有更好的方法也欢迎留言哦！！
