【vue】高德地图及插件在vue中的基本使用

最新推荐文章于 2024-09-25 10:39:45 发布

菜卷_

最新推荐文章于 2024-09-25 10:39:45 发布

阅读量2.4k

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/fuxin199207/article/details/121789723

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue项目中集成高德地图，包括在index.html中引入API，配置vue.config.js，全局注册AMap，以及在组件中初始化地图。此外，还展示了如何加载高德地图的单个和多个插件，如ToolBar和Driving，为用户提供地图操作和路线规划功能。

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

一、vue中使用高德地图

1,将这一段代码复制到vue项目public目录下的index.html文件中,然后把url中key后边的参数修改为你自己申请的key。

    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=1.4.15&key=d4332e5adb8b584442266763d20b978c"
    ></script>

2，根目录下新建一个vue.config.js文件，把下边代码复制进去，记得重新编译

module.exports = {
  configureWebpack: {
    externals: {
      AMap: "AMap",
    },
  },
};

3，然后按自己需求，选择在main.js注册为全局或在组件中使用，我这里注册的是全局方法

import Vue from "vue";
import AMap from "AMap";

Vue.component(AMap);

4，最后就可以在组件中使用了

<template>
  <div class="home">
    <div id="container"></div>
  </div>
</template>

<script>
export default {
  name: "Home",

  mounted() {
    this.initMap();
  },

  methods: {
    initMap() {
      const map = new AMap.Map("container");
    },
  },
};
</script>

<style scoped>
#container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
</style>

二、使用高德插件

加载单个插件

<template>
  <div class="home">
    <div id="container"></div>
  </div>
</template>

<script>
export default {
  name: "Home",
  
  mounted() {
    this.initMap();
  },

  methods: {
    initMap() {
      const map = new AMap.Map("container");

      map.plugin("AMap.ToolBar", function () {
        map.addControl(new AMap.ToolBar());
      });
    },
  },
};
</script>

<style scoped>
#container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
</style>

加载多个插件，只需要将plugin的第一个参数变为数组就可以了

map.plugin(["AMap.ToolBar", "AMap.Driving"], function () {
  map.addControl(new AMap.ToolBar());

  const driving = new AMap.Driving(); //驾车路线规划
  driving.search(/*参数*/);
});