在vue项目中引入高德地图及其UI组件的方法


Posted in Javascript onSeptember 04, 2018

引入高德地图:

打开index.html,引用高德地图的JavaScript API:

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你的API key"></script>

在“key=”这里添加你申请的key,key不需要加引号。

引入高德地图UI组件,只需要在上面代码后面再加一串代码:

<script src="//webapi.amap.com/ui/1.0/main.js"></script>

配置webpack

打开webpack.base.conf.js文件,找到module.exports,在externals对象中加入一行:'AMap': ‘AMap'

externals: {
 'AMap': 'AMap',
},

至此引入的步骤已完成,创建一个vue文件

<template>
 <div id="container" class="mymap"></div>
</template>
<script>

import AMap from 'AMap'; //在页面中引入高德地图

export default {
 mounted(){
  this.loadmap();  //加载地图和相关组件
 },
 methods: {
  loadmap(){
  const map = new AMap.Map('container', {
   zoom: 9
  });
  }
 }
}
</script>
<style scoped>
 .mymap{
  width: 300px;
  height: 300px;
 }
</style>

运行,不出意外就可以看到地图了:

在vue项目中引入高德地图及其UI组件的方法

如果使用高德地图UI组件,在加载地图的同时加载UI组件就可以了:

loadmap(){
 const map = new AMap.Map('container', {
  zoom: 9
 });
 AMapUI.loadUI(...)  //加载UI组件
}

组件里的内容根据需求自定,各组件在高德地图官网有demo,可以直接粘进来用。

以上这篇在vue项目中引入高德地图及其UI组件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Date对象格式化函数代码
Jul 17 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
js/jq仿window文件夹框选操作插件
Mar 08 Javascript
VueJs监听window.resize方法示例
Jan 17 Javascript
package.json配置文件构成详解
Aug 27 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
使用validate.js实现表单数据提交前的验证方法
Sep 04 #Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 #Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 #Javascript
create-react-app安装出错问题解决方法
Sep 04 #Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 #Javascript
工作中常用到的ES6语法
Sep 04 #Javascript
用POSTMAN发送JSON格式的POST请求示例
Sep 04 #Javascript
You might like
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
php中explode函数用法分析
2014/11/15 PHP
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python文件右键找不到IDLE打开项解决办法
2015/06/08 Python
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
python实现ID3决策树算法
2017/12/20 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
Python urllib2运行过程原理解析
2020/06/04 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
阿里旅行:飞猪
2017/01/05 全球购物
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
社团招新策划书
2014/02/04 职场文书
超市商业计划书
2014/05/04 职场文书
物业管理工作方案
2014/05/10 职场文书
公民授权委托书范本
2014/09/17 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
2015年教师新年寄语
2014/12/08 职场文书
考研英语复习计划
2015/01/19 职场文书
党员个人自我评价
2015/03/03 职场文书
教师师德表现自我评价
2015/03/05 职场文书
离婚协议书范文2016
2016/03/18 职场文书
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技