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

---

一、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(/*参数*/);
});

---