在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 相关文章推荐
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 Javascript
js不间断滚动的简单实现
Jun 03 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
Angular2数据绑定详解
Apr 18 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
vue-cli配置环境变量的方法
Jul 09 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 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
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
php foreach循环中使用引用的问题
2013/11/06 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
javascript下function声明一些小结
2007/12/28 Javascript
在html页面中包含共享页面的方法
2008/10/24 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
vue keep-alive 动态删除组件缓存的例子
2019/11/04 Javascript
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
Python设计模式之观察者模式实例
2014/04/26 Python
python去除所有html标签的方法
2015/05/05 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
Python Paramiko模块的安装与使用详解
2016/11/18 Python
python解析json串与正则匹配对比方法
2018/12/20 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
python二元表达式用法
2019/12/04 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
浙大网新C/C++面试解惑
2015/05/27 面试题
新闻编辑自荐信
2013/11/03 职场文书
2014年新生军训方案
2014/05/01 职场文书
师范生求职自荐信
2014/06/14 职场文书
放飞理想演讲稿
2014/09/09 职场文书
自主招生学校推荐信
2014/09/26 职场文书
邀请函范文
2015/02/02 职场文书
保洁员岗位职责
2015/02/04 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android