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

网络编程 2024/11/8 佚名

3 2 1

本文代码仅针对 Vue CLI 3.x 生成的项目有效，但是在第二步配置的时候，可以直接配置 webpack.externals，所以本引入思路是通用的，并不局限于该项目

资源

AMap 准备-入门教程

引入 AMap

在 public/index.html 文件 </body> 前引入

<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>




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