vue+高德地图配置及添加marker

1.首先在index.html中引入高德地图

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=&plugin=AMap.Driving"></script>

备注：key是在高德地图平台申请的密钥必填的，plugin是插件所用到的方法（这里使用的是行程经纬度）

2.在需要使用地图的界面：

<div id="container"></div>

script中 设置全局变量 var MAP,driving;

在mounted中：

MAP = new AMap.Map('container', {

                mapStyle: 'amap://styles/normal',

                zoom: 4, //级别

                center: [116.397428, 39.90923], //中心点坐标

                viewMode: '3D', // 地图模式

                pitch: 43.5, //设置俯仰角

            });

  这样就可以显示地图了，然后我们把marker添加到地图上

 

   使用axios获取后台接口：

     axios.post('后台接口地址').then(res=>{

           let {code,data} = res.data;

           if(code == 200){

              data.map(item=>{

                    let marker = new AMap.Marker({

                                    map: MAP,

                                    icon: require('../images/markerIcon.png') ,//marker图标

                                    position: [item.longitude, item.latitude],//接口返回经纬度

                                    title:item.carNumber,

                    });

              })

          }

     })

 

   

如果是需要动态切换图标的位置则会用到websocket；

那么把上边的方法直接写到onMessage里边就可以了，但是在渲染marker之前，必须先调用MAP.clearMap()方法，

再进行渲染，否则marker图标改变位置时，原先的marker图标依然还在而导致marker图标越来越多。

3.再说这个plugin获取行程路径的方法

在method中定义一个方法：

showMap() {

      MAP = new AMap.Map("container", {

          resizeEnable: true,

          center: [116.397428, 39.90923],//地图中心点

          zoom: 13 //地图显示的缩放级别

      });

      //构造路线导航类

      driving = new AMap.Driving({

        map: MAP,

        panel: "panel"

      });

      this.tuJingPath = [];

      axios.post('后台接口地址').then(res=>{

        let {code,data} = res.data;

        if(code==200){

          this.startPath = [data[0].longitude,data[0].latitude];//起点坐标

          this.endPath = [data[data.length-1].longitude,data[data.length-1].latitude];//终点坐标

          data.map(item=>{

            this.tuJingPath.push(new AMap.LngLat(item.longitude,item.latitude))

            this.tuJingPath.shift();

            this.tuJingPath.pop();

          })

          // 根据起终点经纬度规划驾车导航路线

          driving.search(this.startPath,this.endPath,{waypoints:this.tuJingPath},(status, result)=>{

              if (status === 'complete') {

                  // log.success('绘制驾车路线完成')

              } else {

                  // log.error('获取驾车数据失败：' + result)

              }

          })

        }

      })

    },

    

在需要这个功能的页面直接调用就OK：

还有许多方法，高德文档上都有，感兴趣的小伙伴可以详细看一下，随时沟通！