扣丁学堂HTML5培训之Vue引入AMap高德地图实现代码

2019-04-29 15:34:21 1872浏览

今天扣丁学堂HTML5培训老师给大家分享一篇关于Vue引入AMap高德地图的实现代码详解，首先针对VueCLI3.x生成的项目有效，但是在第二步配置的时候，可以直接配置webpack.externals，所以本引入思路是通用的，并不局限于该项目。

引入AMap

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

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值"></script>

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

以上就是关于扣丁学堂HTML5培训之Vue引入AMap高德地图实现代码的全部内容，希望对大家的学习有所帮助，最后想要了解更多关于HTML5方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育平台为您提供权威的HTML5开发环境搭建视频，扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群：673883249。

【扫码进入HTML5VIP免费公开课】