vue+高德AMAP 在地图上添加marker点及label

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

        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: "

"+marker.name+"

", //设置文本标注内容

                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就好看多了，实现效果如下图：

当然如果你有更好的方法也欢迎留言哦！！