高德地图JSAPIvue项目的使用

最近在项目中使用高德地图JSAPI,遇到一些问题整理一下做个总和记录,希望能帮到看到文章的大家

1)关于引用

    npm i @amap/amap-jsapi-loader --save 然后创建好地图容器后引入地图

    注意避坑的点: (1)使用loca可视化的时候地图模式一定换成3d以及指定版本号(2)记得设置秘钥,这里是按官网的,初始话完成后直接在生命周期调用即可

window._AMapSecurityConfig = {
    securityJsCode: "",//秘钥
}

//初始化地图
initMap(){
    AMapLoader.load({
    key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
    version:"2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins:['AMap.Walking'],// 需要使用的的插件列表，如比例尺'AMap.Scale'等
    Loca:{ 
      version: '2.0.0'
    },
  }).then((AMap)=>{
      this.map = new AMap.Map("map",{  //设置地图容器id
        resizeEnable: true,
        viewMode:"3D",    //是否为3D地图模式
        zoom:13,           //初始化地图级别
        mapStyle: 'amap://styles/darkblue',//地图初始样式,这里选择的是深蓝色
        center:[xxxx, xxxxx], //初始化地图中心点位置
      });
      this.loca = new Loca.Container({
        map: this.map
      );
  }).catch(e=>{
      console.log(e);
  })
}

2)添加点标记

添加点标记时可以事先把labelsarr在data里面存起来方便之后的删除,这里我并没有这样做,点标记携带数据的话可以在new AMap.Marker的时候直接加一个自定义属性扔里面,也可以在之后直接绑上去

      //循环添加点标记数组
      labelsfn(arr = [],str){
        let labelsarr = [] //这个就是存点标记数据的数组
        arr.forEach((item,i)=>{ //这里是传了一堆坐标,直接循环去建立点标记数据
          let icon = new AMap.Icon({
              // 图标尺寸
              size: new AMap.Size(40,40),
              // 图标的取图地址
              image: `图片地址`,
              // 图标所用图片大小
              imageSize: new AMap.Size(40, 40),
          });
          let marker = new AMap.Marker({
              anchor: 'bottom-center', //设置锚点
              offset: new AMap.Pixel(0,8), //设置偏移量
              icon: icon,
              position:[item.longitude || 0,item.latitude || 0] // 位置
          })
          marker.content = ""
          marker.emit('click', {target: marker});
          marker.on('click', "这里是事件函数"); // 点标记添加事件
          labelsarr.push(marker)//最后把点标记数据push进数组
        })
        this.map.add(labelsarr);// 添加到地图
      },

注意避坑的点:(1):点标记点击出来的对话框,因为是在marker.contrnt这里写的对话框内容,如果要绑定事件,可以使用这个方法,但是只能传一个参数,还不能是对象,有大佬可以给指点指点

  created(){
    let thet = this
    window.events = (item)=>{
      //事件
    }
  },

3)删除点标记

上面说过在地图上添加点标记前可以把labelsarr存在data里这里就可以用到

//删除点标记
removelabel(){
    this.map.remove("存起来的点标记数据");
},

4)规划路径

通常规划路径是一个终点一个始点,但是该项目是多个始点一个终点,所以我是这么写的,

//规划路径
routewking(starting,end){ //传一个终点,一个其他坐标数组
     starting.forEach((item,index)=>{
       //步行导航
       let walking = new AMap.Walking({
           map: this.map,
           hideMarkers: true,
           autoFitView: false
       }); 
       //根据起终点坐标规划步行路线
       walking.search([item.longitude,item.latitude], end, function(status, result) {
          if (status === 'complete') {
            //console.log('步行路线数据查询成功');
          } else {
            //console.log('步行路线数据查询失败' + result);
          } 
       });
       this.maparr.push(walking) //把规划好的路径存在data里
     })
},

注意避坑的来了,当我使用这个生成路径后之后的删除就出问题了,思来想去就是在push的时候他只保留了一条路径,删除时就删不干净,所以我先把数据存起来,之后在删除的时候就可以循环删除

      //删除路径
      removewking(){
          this.maparr.forEach((item)=>{
            item.clear()
          })
      },