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 相关文章推荐
jquery 表单下所有元素的隐藏
Jul 25 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
Vue实现双向数据绑定
May 03 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
微信提示 在浏览器打开 效果实现过程解析
Sep 10 Javascript
vue 实现input表单元素的disabled示例
Oct 28 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不用正则采集速度探究总结
2008/03/24 PHP
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
javascript 动态加载 css 方法总结
2009/07/11 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
2011/07/31 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
Webpack3+React16代码分割的实现
2021/03/03 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
Django中FilePathField字段的用法
2020/05/21 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
法定代表人身份证明书(含说明)
2014/10/02 职场文书
公司员工辞职信范文
2015/05/12 职场文书
2015党建工作简报
2015/07/21 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
python小程序之飘落的银杏
2021/04/17 Python
Promise面试题详解之控制并发
2021/05/14 面试题
Java常用函数式接口总结
2021/06/29 Java/Android
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android
python常见的占位符总结及用法
2021/07/02 Python
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android
CSS的calc函数用法小结
2022/06/25 HTML / CSS