vue+express+node高德地图模块

1.注册/登录高德地图开发者

注册key

2.vue代码

使用 npm i @amap/amap-jsapi-loader下载模块

npm i vue-amap

<template>
  <div>
    <div id="container" style="width: 100%; height: 800px"></div>
    <div id="panel"></div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      console.log(AMapLoader);
      AMapLoader.load({
        // Key是必填的
        key: '自己的高德key',
        // 指定要加载的JSAPI的版本，可以根据你的需求修改版本号
        version: '2.0',
        plugins: [
          'AMap.Riding',
          'AMap.DrivingPolicy', // DrivingPolicy.LEAST_FEE要去掉后面的.LEAST_FEE
          'AMap.LngLat',
          'AMap.Map',
          'AMap.Polyline',
          'AMap.PolylineEditor'
        ]
      }).then((AMap) => { // 这里不需要用到log参数
        let map = new AMap.Map('container', {
          center: [115.485083, 38.814709], // 请填入地图打开时的中心位置坐标
          zoom: 14,
          resizeEnable: true,
        });
        var ridingOption = {
          map: map,
          panel: 'panel',
          policy: AMap.RidingPolicy.LEAST_FEE, // 这里使用AMap.DrivingPolicy.LEAST_FEE作为参数
          // 其他字段保持不变
        };
        var driving = new AMap.Riding(ridingOption);
        driving.search(new AMap.LngLat(坐标开始值), new AMap.LngLat(坐标结束值), function (status, result) {
          // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
          if (status === 'complete') {
            // log.success()
            console.log('绘制驾车路线完成');
          } else {
            // log.error('获取驾车数据失败：' + result)
            console.log('失败');
          }
        });
      })
    }
  }
};
</script>

<style type="text/css">
#panel {
  position: fixed;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 10px;
  right: 10px;
  width: 280px;
}

#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

#panel .amap-lib-driving {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
</style>

main.js配置

// 地图组件
import VueAMap from "vue-amap"; // 引入插件
Vue.use(VueAMap); // 使用插件
VueAMap.initAMapApiLoader({ // 初始化插件
    key: "高德key值", // 高德key，自己官网申请即可，这里是我申请的
    plugin: ["AMap.Geocoder"],  // 插件集合，这里只有一个定位功能，所以就只放一个AMap.Geocoder
});

import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
  securityJsCode: "自己的高德秘钥"
};