在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 相关文章推荐
贴近用户体验的Jquery日期、时间选择插件
Aug 19 Javascript
快速使用Bootstrap搭建传送带
May 06 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
js实现随机点名小功能
Aug 17 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 Javascript
JavaScript中的执行环境和作用域链
Sep 04 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 class中public,private,protected的区别以及实例分析
2013/06/18 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
Python中使用异常处理来判断运行的操作系统平台方法
2015/01/22 Python
python网络编程之文件下载实例分析
2015/05/20 Python
Python循环语句中else的用法总结
2016/09/11 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
Anaconda入门使用总结
2018/04/05 Python
python实现视频分帧效果
2019/05/31 Python
使用Python函数进行模块化的实现
2019/11/15 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
30岁生日感言
2014/01/25 职场文书
2014自荐信的写作技巧
2014/01/28 职场文书
大学秋游活动方案
2014/02/11 职场文书
模范班主任事迹材料
2014/12/17 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
带你学习MySQL执行计划
2021/05/31 MySQL
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB