在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 相关文章推荐
javascript 二维数组的实现与应用
Mar 16 Javascript
关于flash遮盖div浮动层的解决方法
Jul 17 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
js实现创建删除html元素小结
Sep 30 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
微信小程序云开发之使用云函数
May 17 Javascript
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 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
PHP的cURL库简介及使用示例
2015/02/06 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
prototype Element学习笔记(篇一)
2008/10/26 Javascript
jquery 批量上传图片实现代码
2010/01/28 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
pandas表连接 索引上的合并方法
2018/06/08 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
python求解汉诺塔游戏
2020/07/09 Python
pandas参数设置的实用小技巧
2020/08/23 Python
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
竞选劳动委员演讲稿
2014/04/28 职场文书
研究生导师推荐信
2014/09/06 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
繁星春水读书笔记
2015/06/30 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
java版 简单三子棋游戏
2022/05/04 Java/Android
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers