Vue之如何调用高德地图步骤详解

Vue项目中使用高德地图详细步骤如下

一.获取高德地图的key

获取地址：高德开放平台https://lbs.amap.com/

1.手机号登录高德开放平台

3、选择web服务，然后提交，就会生成key的值

二.npm 安装 vue-amap

npm install --save vue-amap

三.在 main.js 中引用 vue-amap

// 引入高德地图
import VueAMap from 'vue-amap';Vue.use(VueAMap);// 初始化vue-amap
VueAMap.initAMapApiLoader({// 高德的keykey: '您申请的高德地图key',// 插件集合plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],// 高德 sdk 版本，默认为 1.4.4v: '1.4.4'
});

注意：key值需要赋值自己申请的高德地图key

四.在vue组件中使用地图

代码如下：

<template><div id="firstPage"><div class="map"><el-amap :center="center" :zoom="zoom" id="container" :events="events"><el-amap-marker :position="center" :label="label"></el-amap-marker></el-amap></div></div>
</template><script>
export default {data() {return {center: [116.397428, 39.90923],zoom: 15,label: {content: "微微一笑绝绝子",offset: [10, 12]}};},updated() {},mounted() {},created() {this.initMap();},methods: {// 初始化地图initMap(map) {var map = new AMap.Map("container", {zoomEnable: true, //是否禁止缩放zoom: 12, //缩放比例dragEnable: false, //禁止拖动cursor: "hand" // 鼠标在地图上的表现形式，小手});// 初始化工具条map.plugin(["AMap.ToolBar"], function() {map.addControl(new AMap.ToolBar());});}}
};
</script>

容器宽高自己设置吧~

五.效果图

完成啦~~

如有不足之处，欢迎各位大佬留言指正！

作者：微微一笑绝绝子

出处：https://www.cnblogs.com/wwyxjjz/p/15184344.html

本博客文章均为作者原创，转载请注明作者和原文链接。

Vue之如何调用高德地图步骤详解相关推荐

移动端html5手写板,Vue+canvas实现移动端手写板步骤详解
这次给大家带来Vue+canvas实现移动端手写板步骤详解,Vue+canvas实现移动端手写板的注意事项有哪些,下面就是实战案例,一起来看一下. 清除保存 Canvas画板 var draw; v ...
Thrift实现C#调用Java开发步骤详解
概述 Thrift实现C#调用Java开发步骤详解详细代码下载:http://www.demodashi.com/demo/10946.html Apache Thrift 是 Facebook ...
vue项目中调用高德地图vue-amap 插件的AMap.PlaceSearch简用
vue项目调用高德地图vue-amap 插件的AMap.PlaceSearch简用结合 elementui 的 el-input 直接下拉选取地点不展示地图 1.下载 npm install v ...
iOS 高德地图开发详解
Demo地址如果有所帮助记得关注,点Star demo中添加了查看路况功能,如果不需要,可以删除. ##一:基本地图功能实现 ####1.申请密钥流程申请密钥链接 2.配置环境(重点) 高德地图提 ...
Android高德地图开发详解
这段时间开发的时候用到了高德地图,对高德地图开发有心得体会,现在分享给大家,对我开发过百度地图的我来说,总体来说高德地图Demo,没有百度讲解的详细个人更偏向于使用百度地图,但是没办发,项目需要使用 ...
Android开发实现高德地图定位详解
一. 要实现高德地图定位呢,首先需要做好以下几步准备: 1. 在高德开放平台注册帐号注册地址:http://lbs.amap.com 2. 在开发中下载Android平台下的地图SDK和定位S ...
vue调用高德地图实现定位
vue调用高德地图实现定位第一步创建高德地图key 第二步:下载vue-amap npm install vue-amap --save 第三步:在项目main.js引入vue-amap impor ...
vue中如何调用ios摄像头_vue2.0调用摄像头步骤详解
这次给大家带来vue2.0调用摄像头步骤详解,使用vue2.0调用摄像头的注意事项有哪些,下面就是实战案例,一起来看一下. 可以在github 上下载demo链接 vue组件代码 import {Ex ...
加载vue文件步骤_vue中.vue文件解析步骤详解
这次给大家带来vue中.vue文件解析步骤详解,vue中.vue文件解析的注意事项有哪些,下面就是实战案例,一起来看一下. 我们平时写的 .vue 文件称为 SFC(Single File Compo ...
python调用高德地图api 可视化_Python：利用高德地图API实现找房
记:本项目是在实验楼上看到的,但是上面的代码由于没有及时维护,爬虫文件的代码不再能完整的把所有房源信息爬取下来,我根据最新的58同城官网进行了研究,现在的官网的房源信息已经不是分页的了,而是拉到最后自 ...

Vue之如何调用高德地图步骤详解

Vue之如何调用高德地图步骤详解相关推荐

最新文章

热门文章