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 18 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
jQuery解决$符号命名冲突
Jun 18 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
Sep 30 Javascript
从原生JavaScript到React深入理解
Jul 23 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
ADODB类使用
2006/11/25 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
javascript[js]获取url参数的代码
2007/10/17 Javascript
Mootools 1.2教程 类(一)
2009/09/15 Javascript
js+xml生成级联下拉框代码
2012/07/24 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
Python检测网站链接是否已存在
2016/04/07 Python
Python变量和字符串详解
2017/04/29 Python
Python单元测试实例详解
2018/05/25 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
详解python with 上下文管理器
2020/09/02 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
灵泰克Java笔试题
2016/01/09 面试题
应届毕业生应聘自荐信
2013/12/07 职场文书
孙振耀退休感言
2015/08/01 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL