vue中使用百度地图轨迹动画

LOVAE007

已于 2022-09-29 18:43:49 修改

阅读量3.5k

点赞数 1

文章标签： vue.js 前端 javascript

于 2022-09-29 18:40:53 首次发布

本文链接：https://blog.csdn.net/u010419628/article/details/127111952

版权

本文详细介绍了如何在Vue项目中集成百度地图，包括在不同版本Vue项目的`index.html`中引入地图，创建地图容器，以及在组件生命周期内创建地图。进一步讨论了如何实现轨迹动画，通过修改百度API以适应Vue项目，并提供了关键代码示例。最后提到由于百度地图API收费，作者转向了其他定位平台并建议查看相关文章。

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

本篇文章主要讲述, 如何在vue项目中集成百度地图
1.首先找到你项目底下的index.html入口文件,这个根据不同的版本,所以存在的位置是不同的,具体如下:
a.路径如下: 项目名/public/index.html
在这里插入图片描述

b.路径如下: 项目名/index.html
在这里插入图片描述

找到index文件后,导入百度地图:

2.接着到你想要使用地图的页面中,写地图的容器,代码如下:

  <div class="patrol_area">
    <div id="allmap" style="height:600px;"></div>
  </div>
</template>

注意容器的id,以及要给容器设置固定的高度,否则地图出不来

3.接着导入script模块的代码,具体如下:

export default {
  name: 'Dashboard',
  data(){
    return {
    }
  },
  mounted(){
    this.createMpa()
  },
  methods:{
    createMpa(){
         // GL版命名空间为BMapGL
        // 按住鼠标右键，