一、效果演示

1. 起点终点选择

 2. 地址搜索

 

二、准备工作

1. 获取高德地图key

1.1  访问高德地图官网注册完成后登录，进入控制台

 1.2  左侧 应用管理-我的应用，点击创建新应用

1.3 点击添加

 

1.4 选择Web端(JS API) 

1.5 创建完成，得到key和安全密钥

 

2. 引入高德地图npm包

npm i @amap/amap-jsapi-loader --save

 三、正式开始写代码

提示：以下代码全部在*.vue文件中编写，无其他文件

1. 设置key和安全密钥，初始化地图

把xxxxxxxxxxxxxxxxxxx换成自己申请的

 2. 选取起点和终点

// 点击地图事件
      clickMapHandler(e){
        //选择起点
        if (this.isStart){
          if (this.startMarker !== null){
            this.map.remove(this.startMarker)
          }
          this.startCoordinate.lon = e.lnglat.getLng()
          this.startCoordinate.lat = e.lnglat.getLat()
          this.startCoordinateDescription = '经度：' + this.startCoordinate.lon + ',     纬度：' + this.startCoordinate.lat
          //标点
          this.startMarker = new AMap.Marker({
            position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: '起点',
            label: {
              content: '起点'
            }
          })
          // 将创建的点标记添加到已有的地图实例
          this.map.add(this.startMarker)
        }
        //选择终点
        else {
          if (this.endMarker !== null){
            this.map.remove(this.endMarker)
          }
          this.endCoordinate.lon = e.lnglat.getLng()
          this.endCoordinate.lat = e.lnglat.getLat()
          this.endCoordinateDescription = '经度：' + this.endCoordinate.lon + ',     纬度：' + this.endCoordinate.lat
          this.endMarker = new AMap.Marker({
            position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: '终点',
            label: {
              content: '终点'
            }
          })
          this.map.add(this.endMarker)
        }
      }

3.搜索地址功能

// 搜索地址
      remoteMethod(query) {
        if (query !== "") {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.AutoComplete.search(query, (status, result) => {
              this.options = result.tips;
            });
          }, 200);
        } else {
          this.options = [];
        }
      },
      // 选中提示
      currentSelect(val) {
        // 清空时不执行后面代码
        if (!val) {
          return ;
        }
        // 自动适应显示想显示的范围区域
        this.map.setFitView();
        //清除marker
        if (this.searchMarker){
          this.map.remove(this.searchMarker)
        }
        //设置marker
        this.searchMarker = new AMap.Marker({
          map: this.map,
          position: [val.location.lng, val.location.lat],
        });
        this.keywords = val.name
        //定位
        this.map.setCenter([val.location.lng, val.location.lat])
      }

4. 页面代码

5. 全部代码

参考：vue对高德地图的简单使用：点击标记并获取经纬度和详细地址