vue项目使用高德aip实现两地路线规划

平头哥223

于 2021-03-24 16:04:01 发布

阅读量719

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_43398729/article/details/115179192

版权

本文介绍如何在Vue项目中利用高德API进行两地路线规划。首先需要申请高德的API KEY，并将其添加到index.html的script标签中。接着，在webpack配置文件build>webpack.base.conf.js中进行相应的模块配置，以实现功能。

摘要由CSDN通过智能技术生成

需提前申请高德KEY
将script标签放入index.html中，key后plugin=XXX为高德驾驶路线规划

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

在build>webpack.base.conf.js中module.exports={}里添加

externals: {
    'AMap': 'AMap',
    'AMapUI': 'AMapUI'
  }

具体代码：

<template>
  <div>
    <span>起点：</span><input type="text" v-model="start">
    <span>终点：</span><input type="text" v-model="end">
    <button @click="re">查询</button>
    <div id="box1">
    <div id="daohang"></div>
</div>
  </div>
</template>

<script> 
export default {
  name: 'HelloWorld',