Vue 引入AMap高德地图的实现代码

<script type="text/javascript" src="/UploadFiles/2021-04-02/maps">

配置 Webpack


项目根目录新建配置文件 vue.config.js，填入内容：


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



在项目中使用


新建 Index.vue 文件，填入内容：


<template>
 <div>
  <div style="width: 100vw;height: 100vh" id="container"></div>
 </div>
</template>
<script>
// eslint-disable-next-line
import AMap from "AMap";
export default {
 name: "Index",
 data() {
  return {};
 },
 mounted() {
  new AMap.Map("container", {
   resizeEnable: true,
   zoom: 11
  });
 }
};
</script>




以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。