vue使用高德amap原生js開發(fā)，在地圖上添加marker點(diǎn)及l(fā)abel文本框
參考地址：https://lbs.amap.com/api/javascript-api/guide/map/lifecycle
這里直接上代碼
loadEmployeeData(){
?????var?params={}
????params.mapType="arcgis_tianditu_online"
????var?empData=[];
? ?//獲取接口數(shù)據(jù)
????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!=""){
? ? ? ?//這里需要判斷一下坐標(biāo)，如果沒有坐標(biāo)，加載的時(shí)候會(huì)報(bào)錯(cuò)
??????????this.empMarkers.push(tempobj)
????????}
??????}
??????this.loadMarkers(this.empMarkers,"emp")
????})
??},
//加載marker點(diǎn)
?loadMarkers(Markerdata,Mtype){
??????var?gmarker;
??????var?_this=this;
??????//?map.clearMap()?//加載marker點(diǎn)時(shí)先清地圖
??????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);
????????????//定位圖片下方標(biāo)注
??????????????gmarker.setLabel({
????????????????offset:?new?AMap.Pixel(0,?0),??//設(shè)置文本標(biāo)注偏移量
????????????????content:?"<div>"+marker.name+"</div>",?//設(shè)置文本標(biāo)注內(nèi)容
????????????????direction:?'bottom'?//設(shè)置文本標(biāo)注方位
??????????????});
????????????}
????????});
到這里，marker點(diǎn)及l(fā)abel就能正常顯示了，但是這里發(fā)現(xiàn)原生的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點(diǎn)及l(fā)abel就好看多了，實(shí)現(xiàn)效果如下圖：
當(dāng)然如果你有更好的方法也歡迎留言哦！！
