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

引入高德地图：

打开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="https://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>

运行，不出意外就可以看到地图了：

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

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

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

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

赞 (0)

相关推荐

  • vue基于Vue2.0和高德地图的地图组件实例

    前言 在做基于LBS的应用中,时常会和地图打交道,最直接的解决方案,当然是去对应的地图官网找文档,然后一步步来玩.对于简单场景而言,体验应该还好,但对于一些状态多,变化频繁的复杂场景而言,不仅要时刻维护本地数据状态和地图状态同步,还要查找设置各种状态的地图API,实在是让人头疼的事情. 设计vue-amap的初衷,也就是为了让开发者,在编写地图应用时,能从查找众多地图API和繁琐的地图状态同步中解脱出来. 那么vue-amap是如何做到的,又能给开发者带来怎样的便利与开发体验呢?我们就从一个轻点

  • vue异步加载高德地图的实现

    本文介绍了vue异步加载高德地图的实现,分享给大家,具体如下: 几种加载js的方式 同步加载 异步加载 延迟加载 同步加载 用的最多的一种方式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作.所以默认同步执行才是安全的.但这样如果js中有输出document内容.修改dom.重定向等行为,就会造成页面堵塞.所以一般建议把<script>标签放在<body>结尾处,这样尽可能减少页面阻塞. <script src="htt

  • vue调用高德地图实例代码

    vue调用高德地图实例代码

    一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了,按照其文档,就能够安装下来. 二. 按照官方提供的方法引入 1.修改webpac.base.conf.js文件 externals: { 'AMap': 'AMap' } 2.引入sdk 引入有两种方式,一种是页面直接引入 复制代码 代码如下: <script type="text/javascript" src=&q

  • vue高德地图之玩转周边

    vue高德地图之玩转周边

    前言:在之前的博客中,有成功引入高德地图,这是以前的地址  vue 调用高德地图. 因为一些需求,需要使用到地图的周边功能. 完整的项目代码请查看  我的github 一 .先看要实现的结果,参考了链家的周边,如图所示.  二 .原理分析 1.引入高德api,这个在之前的博客提到过,vue 调用高德地图. 2.使用地图的周边插件,这是  高德网站的api. AMap.PlaceSearch //地点搜索服务插件,提供某一特定地区的位置查询服务 在插件中的各种方法中选取了searchNearBy的

  • Vue使用高德地图搭建实时公交应用功能（地图 + 附近站点+线路详情 + 输入提示+换乘详情）

    最近项目要使用高德地图写了一个实时公交的应用,这边分享一个小应用主要熟悉下高德地图在vue中的使用,常用api,vue的常用指令 先给大家看下页面效果: 如果有需要源码的童鞋请移步我的github地址 vue搭建实时公交 (欢迎star) 实现思路 在vue项目中导入高德地图 具体功能调用相应高德js APi 1.在vue项目中导入高德地图 1.修改webpac.base.conf.js文件 externals: { 'AMap': 'AMap' } 2.引入sdk 引入有两种方式,一种是在in

  • vue-cli中使用高德地图的方法示例

    第一步 去高德地图开放平台申请密钥  高德地图开放平台 第二部 在vue-cli项目目录结构 里面多了config文件夹和 utils文件夹 config.js里面是这样的  主要是导出密钥 // 高德地图 key export const MapKey = '你的密钥key' // 地图限定城市 export const MapCityName = '武汉' utils文件夹里面 新建路一个remoteLoad.js 主要是动态创建script标签 封装了一个函数 传入URL地址() expo

  • vue.js高德地图实现热点图代码实例

    1.在index.html引入高德地图JSAPI <script src="https://webapi.amap.com/maps?v=1.3&key=xxx"></script> 2.地图dom <div class="map-container"> <div id="container" style="width:100%;height:500px"></di

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

    引入高德地图: 打开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

  • VUE项目中调用高德地图的全流程讲解

    目录 前言 申请高德key 技术选型 刷新页面,地图加载偶尔失败 在绑定插件的时候,控制台报错 a[d].split is not a function 原生调用高德API 总结 前言 相信大家或多或少都接触过在大屏的项目,在大屏项目中除了用到了echarts中的行政地图,街道地图也是很常见的,今天主要来说一下在vue中调用高德地图遇到的一些问题. 申请高德key 无论我们使用任何方式调用高德地图都需要在高德地图开放平台中申请key 注册帐号 访问高德地图开发平台根据实际情况填写就可以(实名认证

  • vue中引入高德地图并多点标注的实现步骤

    vue中引入高德地图并多点标注的实现步骤

    vue中引入高德地图并多点标记 步骤: 通过vue的方法引入地图 初始化地图,设置宽和高 信息窗口实例 遍历生成多个标记点 首先在项目的public下的index.html中引入地图 <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/> <script src="https://webapi.amap.com/maps?v=1.4.15

  • 详解vue项目中调用百度地图API使用方法

    详解vue项目中调用百度地图API使用方法

    步骤一:申请百度地图密钥: JavaScript API v1.4以及以前的版本无序申请秘钥(ak),自v1.5版本开始需要先申请秘钥(ak),才可以使用,如需获取更高的配额,需要申请  认证企业用户.百度地图API 链接地址:http://lbsyun.baidu.com/apiconsole/key 步骤二:在index.html中添加百度地图JavaScript API接口: <script src="http://api.map.baidu.com/api?v=1.4"

  • 如何在vue项目中使用百度地图API

    如何在vue项目中使用百度地图API

    目录 1.在百度地图开放平台注册账号并登录 2.选择自己所需的地图版本: 3.在我们的vue项目中的public文件夹下的index.html中引入并记得替换上你的ak(这个ak不是其他的ak哈) 4.之后就可以随处使用我们的百度地图了: 5.标记点的添加并拥有点击弹窗效果: 6.为坐标点添加文本标记: 1.在百度地图开放平台注册账号并登录 网址:http://lbsyun.baidu.com/index.php?title=jspopularGL 2.选择自己所需的地图版本: 我个人使用2.0

  • 在vue项目中引入highcharts图表的方法(详解)

    npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa

  • vue项目中引入noVNC远程桌面的方法

    1 .首先,先简单介绍一下概念. VNCServer 是一个为了满足分布式用户共享服务器资源,而在服务器开启的一项服务,对应的客户端软件有图形化客户端 VNCViewer,而 noVNC 则是 HTML5 VNC 客户端,它采用 HTML 5 WebSocket, Canvas 和 JavaScript 实现. noVNC 被普遍用在各大云计算.虚拟机控制面板中.noVNC 采用 WebSockets 实现,但是当前大多 VNC 服务器不支持 WebSocket,所以 noVNC 不能直连 VN

  • 在Vue项目中引入腾讯验证码服务的教程

    什么是腾讯验证码?它长这个样子--:point_down: 最近公司项目要求引入腾讯云验证,要求是这样的: 为了防止别人恶意刷短信验证码,当用户短时间内多次获取验证码的时候,需要调用腾讯验证码,验证成功后会继续自动发送验证码 ,刚开始的我听的一脸蒙蔽,网上搜索也没有多少相关的文章,然而现在我接通啦,发现是很简单点事(或许就是因为太简单了所以没有人写2333-) 不多BB,开始吧! 先看文档的接口调用流程: (文档地址: cloud.tencent.com/document/pr- ) 总共分成几

  • vue项目中使用百度地图的方法

    vue项目中使用百度地图的方法

    1.在百度地图申请密钥: http://lbsyun.baidu.com/  将 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥" ></script> 中的 密钥替换成你申请的,在 vue项目的index.html引用. 2. 在build 文件下下的 webpack.base.conf.js贴入代码 externals: {

  • vue项目中引入vue-datepicker插件的详解

    项目需求中有一个日期选择限制的功能点:今天之前不可选,周末不可选. 传统的input type='date无法做到,所以使用了这个插件来实现功能. 1.引入vue-datepicker loader:npm install vue-datepicker 2.引入moment loader:npm install moment --save 因为vue-datepicker是依赖vue和moment的,所以也应提前 引入moment: 3.在用到该插件的地方引入: import myDatepic

随机推荐