vue调用百度地图API实现路径规划

最新推荐文章于 2024-09-10 19:01:04 发布

Jack King

最新推荐文章于 2024-09-10 19:01:04 发布

阅读量1.5w

点赞数 15

分类专栏： vue学习实例

本文链接：https://blog.csdn.net/weixin_43693592/article/details/86692264

版权

本文介绍了如何在Vue项目中使用百度地图API来实现路径规划。首先新建Vue项目，然后申请百度地图的AK。接着在index.html引入API，配置路由，并在Vue组件中编写相关代码。最后通过npm run dev运行项目，成功展示步行路径规划功能。

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

1.新建vue项目。
2.进百度地图API申请AK。
3.在vue项目的index.html中导入。

4.新建一个vue，配置好路由，代码如下。
在这里插入图片描述

5.vue文件的代码如下。

<template>
  <div style="width: 100%;height: 100%">
    <input type="text" placeholder="出发地" style="width: 10em" id="startAddress">
    <input type="text" placeholder="目的地" style="width: 10em" id="endAddress">
    <input type='button' value='开始' @click='searchByStationName1()'/>
    <p></p>
    <div style="width:1020px;height:500px;border:1px solid gray;margin-left: 25%" id="container"></div>
    <p></p>
  </div>
</template>

<script>
var map
export default {
  name: 'search&