Vue接入高德地图并实现基本的路线规划功能

news2024/9/20 12:19:49

一、申请密钥

二、安装依赖

三、代码实现

四、运行截图

五、官方文档

一、申请密钥

登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。

如图所示填写对应的信息，系统就会自动生成。

二、安装依赖

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

三、代码实现

找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。

完整代码：

<!DOCTYPE html>
<html lang="">
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <link rel="icon" href="<%= BASE_URL %>favicon.ico">
      <title><%= htmlWebpackPlugin.options.title %></title>
      <script type="text/javascript">
          window._AMapSecurityConfig = {
              securityJsCode: '申请的安全密钥',
          }
      </script>
      <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=申请的Key&plugin=AMap.Driving"></script>
      <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
      <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
      <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

直接把下面代码完整的拷贝进去，修改一下经纬度信息就行了，可以当成一个vue组件来使用，完整代码：

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

</template>


<script>

export default {
  name: 'HomeView',
  data(){
    return{
      //此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
      //map:null,
    }
  },
  mounted(){
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
  methods:{
    initMap() {
      //基本地图加载
      var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [	116.324887,40.003069],//地图中心点
        zoom: 13 //地图显示的缩放级别
      });
      //构造路线导航类
      var driving = new AMap.Driving({
        map: map,
        panel: "panel"
      });
      // 根据起终点经纬度规划驾车导航路线
      driving.search(new AMap.LngLat(116.303073,39.988185), new AMap.LngLat(	116.395204,39.994091), function(status, result) {
        // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
        if (status === 'complete') {
          log.success('绘制驾车路线完成')
        } else {
          log.error('获取驾车数据失败：' + result)
        }
      });

    }
  },
}
</script>
<style  scoped>
#container{
  padding:0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
#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>