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


Posted in Javascript onApril 29, 2019

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

资源

AMap 准备-入门教程

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浏览器图片选择预览、旋转、批量上传的JS代码实现
Dec 04 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
JavaScript执行机制详细介绍
Dec 06 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 #Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 #Javascript
微信小程序-form表单提交代码实例
Apr 29 #Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 #Javascript
微信小程序传值以及获取值方法的详解
Apr 29 #Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 #Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 #Javascript
You might like
PHP 和 MySQL 基础教程(三)
2006/10/09 PHP
使用apache模块rewrite_module (转)
2007/02/14 PHP
PHP中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
js程序中美元符号$是什么
2008/06/05 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
js中的闭包学习心得
2018/02/06 Javascript
微信小程序使用swiper组件实现类3D轮播图
2018/08/29 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
js面向对象方式实现拖拽效果
2021/03/03 Javascript
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
节电标语大全
2014/06/23 职场文书
2014年团工作总结
2014/11/27 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
医德医风学习心得体会
2016/01/25 职场文书
入党心得体会
2019/06/20 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers