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 setCapture 区域外事件捕捉
Mar 18 Javascript
鼠标滚轮控制网页横向移动实现思路
Mar 22 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 Javascript
vue 导航守卫和axios拦截器有哪些区别
Dec 19 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 函数执行效率的小比较
2010/10/17 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
2020/04/16 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
python3.5仿微软计算器程序
2020/03/30 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
Python3基于sax解析xml操作示例
2018/05/22 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
教学评估实施方案
2014/03/16 职场文书
学期评语大全
2014/04/30 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
2014年人事部工作总结
2014/12/03 职场文书
师德承诺书
2015/01/20 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
小学校园广播稿
2015/08/18 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS