Vue-高德地图的基本使用(@amap/amap-jsapi-loader)
高德使用步骤
- 1、注册并登录高德开放平台
- 2、 安装高德依赖
- 3、在需要的页面引入该依赖
- 4 .初始化地图
- 1、设置一个地图容器并设置大小
- 2、初始化地图
- 5、效果图
- 6、 完整代码
1、注册并登录高德开放平台
高德开放平台: 高德开放平台
- 首先,注册开发者账号,成为高德开放平台开发者
- 登陆之后,在进入「应用管理」 页面「创建新应用」
- 为应用添加 Key
- 添加成功后,可获取到key值和安全密钥jscode(自2021年12月02日升级,升级之后所申请的 key 必须配备安全密钥 jscode 一起使用;
2、 安装高德依赖
npm i @amap/amap-jsapi-loader --save
然后在package.json里面看到这样一行代码这就代表安装成功
3、在需要的页面引入该依赖
import AMapLoader from "@amap/amap-jsapi-loader"; // 按需引入依赖
window._AMapSecurityConfig = {securityJsCode: "安全密钥", // 安全密钥
};
4 .初始化地图
1、设置一个地图容器并设置大小
<template><!-- 地图 --><div id="map-container"></div>
</template>
......map-container{overflow: hidden;width: 500pxheight: 500px;
}
2、初始化地图
initMap() {AMapLoader.load({key: " key", //key值是key值 和安全密钥不同version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15plugins: [], // 需要使用的的插件列表,如比例尺'AMap.Scale'等}).then((AMap) => {// 初始化地图this.map = new AMap.Map("map-container", {viewMode: "2D", // 是否为3D地图模式zoom: 15, // 初始化地图级别center: [113.425981, 35.423209], //中心点坐标resizeEnable: true,});}).catch((e) => {console.log(e);});},
5、效果图
6、 完整代码
<template><!-- 地图 --><div id="map-container"></div>
</template><script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {// 设置安全密钥securityJsCode: "dce03e4319277adab5833a8a80a0b1f6",
};
export default {data() {return {map: null,};},mounted() {this.initMap();},created() {this.initMap();},methods: {initMap() {AMapLoader.load({key: "99d901020b4dcf6b08aa3bcdb4ab386d", // 申请好的Web端开发者Key,首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15plugins: [], // 需要使用的的插件列表,如比例尺'AMap.Scale'等}).then((AMap) => {console.log(AMap);this.map = new AMap.Map("map-container", {viewMode: "2D", // 是否为3D地图模式zoom: 13, // 初始化地图级别center: [114.268691, 30.401227], //中心点坐标resizeEnable: true,});}).catch((e) => {console.log(e);});},},
};
</script><style scoped>
#map-container {overflow: hidden;width: 500px;height: 500px;margin: 0;
}
</style>
Vue-高德地图的基本使用(@amap/amap-jsapi-loader)相关推荐
- 利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹 高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示 先完成准备工 ...
- vue+高德地图绘制路径
一.vue+高德地图开发 最近开发项目地图用的比较频繁,比如高德地图.百度地图或者echars地图,而且大都是用来做路径展示,所以今天说说高德地图的使用(非全面的高德地图使用) 使用的是vue cli ...
- vue+高德地图实现多边形范围内标点
vue+高德地图实现多边形范围内标点 具体实现: 一.安装并引入高德地图: 二.创建一个aMap地图文件: 三.aMap上创建多边形围栏: 四.配置围栏.地图点击事件: 五.地图点击标点事件: 本篇文 ...
- vue + 高德地图 + wind-layer实现风场
vue + 高德地图 + wind-layer实现风场 效果图: 第一步:引入 wind-layer插件 或者 npm install ol-wind npm install amap-wind ht ...
- vue 给圆遮盖物添加文字 高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...
通过 Vue + 高德地图 JS API 在地图上标记咖啡店 由 学院君 创建于2年前, 最后更新于 2年前 版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...
- Vue+高德地图API的使用(定位打卡)
接上之前的项目 Vue+高德地图API的使用 Vue+高德地图API的使用(插件的使用) 1.页面布局 绘制页面 <div class="Clock"><!-- ...
- Vue 高德地图 js API Loca 如何使用 连接线图层、脉冲连线图层
Vue 高德地图 js API Loca 如何使用 连接线图层.脉冲连线图层 阅读此文你需要已经了解并掌握的: 已经会使用常规地图的生成方式 已经了解如何载入 Loca 插件 如果不了解,可以查看我之 ...
- vue 高德地图Loca.GeoJSONSource、Loca.PolygonLayer绘制3D楼房、AMap.LabelMarker文字标注、Loca.ScatterLayer绘制水波扩散效果
创建地图 假设已经正确引入了高德地图,这里使用2.0版本,注意了,1.4.x版本的使用和2.x版本的使用方式不一样.有很多地方不兼容哦. 话说3D效果这一块,高德是真比不上百度地图哦,要不是项目一直用 ...
- vue 高德地图搜索功能_VUE中使用高德地图做轨迹添加功能,帮助轨迹展示
准备工作 使用前准备 : 高德地图key 使用插件: vue-amap 1.npm安装vue-amap npm install vue-amap --save import AMap from 'vu ...
- vue[高德地图行车路径规划以及路线记录绘制操作]
最近的一个项目中需要根据需求将地图上画出一条高速公路,然后将这条高速公路的行车轨迹绘制成一条带有颜色路线以便后续插入内容. 看遍了不少高德地图的api内容以及搜索了不少的网上资源,发现可以通过路径规划 ...
最新文章
- pytest fixture执行顺序
- Java常用类之【Math类、Random类、System类、Runtime类】
- javascript中数组的22种方法
- my eclipse 类似dreamweaver编辑html,8款替代Dreamweaver的开源网页开发工具
- 轨迹相似性度量方法总结
- php是什么电器元件,电阻器是电子、电器设备中常使用的一种基本电子元件
- 7、Fiddler的HTTP统计视图
- python在线怎么发音-Python如何实现文本转语音
- boost的时间和日期处理-(2)时间的操作
- axure中继器求和_Axure学习笔记:中继器之价格统计
- cmd脚本实现自动拨号
- 银河麒麟服务器修改ip,银河麒麟配置DNS服务器
- 2018.12.3比赛题目:电子警察
- Windows 2003系统25招加速大法
- 7款英文语法检查工具推荐
- 计算语言学之语言理解与认知(1)
- 超通俗易懂科普:什么是光通信?
- Oracle中关于临时表空间无法释放问题
- Python 头像上右下角添加小红旗
- python的类,实例,以及实例化
热门文章
- Docker 安装 Redis 方法一、通过 Dockerfile 构建 创建Dockerfile 首先,创建目录redis,用于存放后面的相关东西。 runoob@runoob:~$ mkdir -
- 准确使用welcome
- 什么是Java框架?主要的Java框架有哪些
- 【C++】henuACM暑期培训Day16 树状数组
- 孙美琪疑案朗威计算机密码,孙美琪疑案朗威攻略4级线索中全面分析 孙美琪疑案郎威攻略4级线索全讲解...
- 【JavaScript、CSS】css动画、js动画
- win server 无法使用网络共享 0x80070035 0x80004005
- 计算机操作系统课后习题答案(第四版).docx
- 主键约束----复合主键
- 为黄磊女儿担心?对明星育儿方式认真,你就输了