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 left,right,mid函数
Jun 10 Javascript
Jquery ajaxsubmit上传图片实现代码
Nov 04 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
vue-cli初始化项目中使用less的方法
Aug 09 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 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
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
PHP正确配置mysql(apache环境)
2011/08/28 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
微信支付的开发流程详解
2016/09/13 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
laravel自定义分页效果
2017/07/23 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
js 单引号 传递方法
2009/06/22 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
python elasticsearch环境搭建详解
2019/09/02 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
python suds访问webservice服务实现
2020/06/26 Python
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
毕业生医学检验求职信
2013/10/16 职场文书
党委书记岗位职责
2013/11/24 职场文书
庆中秋节主题活动方案
2014/02/03 职场文书
物流业务员岗位职责
2014/02/08 职场文书
应届毕业生自荐书
2014/06/18 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
反四风对照检查材料
2014/09/22 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技