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创建子窗口并且回传值示例代码
Jul 02 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
微信小程序--获取用户地理位置名称(无须用户授权)的方法
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 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
Java中final关键字详解
2015/08/10 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
Python调用C++程序的方法详解
2017/01/24 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
澳大利亚珍珠首饰购物网站:Vayo Pearls
2019/03/11 全球购物
工程售后服务方案
2014/06/08 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript