Vue3 + 高德地图
效果图
快速上手
1.在高德开发平台申请开发者账号申请key
2.安装vue-amap
npm i @amap/amap-jsapi-loader --save
cnpm i @amap/amap-jsapi-loader --save
3.创建 div 标签作为地图容器 ,并设置地图容器的 id 属性
<div id="map"></div>
4.设置地图容器样式,为容器指定高度、宽度
#map {margin: 50px auto;width: 800px;height: 500px;
}
5.在组件中引入所需的 API( amap-jsapi-loader )
import AMapLoader from '@amap/amap-jsapi-loader' // 使用加载器加载JSAPI,可以避免异步加载、重复加载等常见错误加载错误
import { shallowRef } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core'
基础类的使用
Marker(标记点)
创建一个 Marker 实例
let markerPoint = new AMap.Marker({position: [121.939253, 29.905078], // 基点坐标offset: new AMap.Pixel(-12, -32), // //标记点相对偏移量,可以固定其地址,不随着地图缩放而偏移draggable: false, //点标记对象是否可拖拽移动defaultCursor: 'pointer'});map.add(markerPoint); // 地图添加标记
自定义 Marker 样式
// 方法一
var startIcon = new AMap.Icon({size: new AMap.Size(25, 34),// 图标尺寸image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',// 图标的取图地址imageSize: new AMap.Size(135, 40),// 图标所用图片大小imageOffset: new AMap.Pixel(-9, -3)// 图标取图偏移量
});
// 将 icon 传入 marker
var startMarker = new AMap.Marker({position: new AMap.LngLat(116.35,39.89),icon: startIcon,offset: new AMap.Pixel(-13, -30)
});
startMarker.setMap(map);//设置地图标记// 方法二
let marker = new AMap.Marker({// icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",position: [116.406315, 39.908775],offset: new AMap.Pixel(-13, -30),//标记点相对偏移量,可以固定其地址,不随着地图缩放而偏移icon: new AMap.Icon({size: new AMap.Size(40, 50), //图标的大小image: "https://webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png",imageOffset: new AMap.Pixel(0, -60)})
});
map.add(marker);
显示地图层级与中心点信息
<div class="info"><h4>获取地图级别与中心点坐标</h4><p>当前级别:<span id="map-zoom">11</span></p><p>当前中心点:<span id="map-center">121.498586,31.239637</span></p>
</div>
function logMapinfo(){let zoom = map.getZoom(); //获取当前地图级别let center = map.getCenter(); //获取当前地图中心位置document.querySelector("#map-zoom").innerText = zoom;document.querySelector("#map-center").innerText = center.toString();
};
//绑定地图移动与缩放事件
map.on('moveend', logMapinfo);
map.on('zoomend', logMapinfo);
获取经纬度坐标
<div class="input-card"><h4>鼠标左键获取经纬度:</h4><div class="input-item"><input type="text" readonly="true" id="lnglat"></div>
</div>
//为地图注册click事件获取鼠标点击出的经纬度坐标
map.on('click', function(e) {document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
});
信息窗体
let infoWindow = new AMap.InfoWindow({ //创建信息窗体isCustom: false, //使用自定义窗体anchor: "top-right", //信息窗体的三角所在位置content:`<h4>信息窗体</h4>`, //信息窗体的内容可以是任意html片段offset: new AMap.Pixel(16, -45)
});
infoWindow.open(map,[121.939253, 29.905078]); //填写想要窗体信息指示的坐标
示例
// 简单功能的实现
setup() {const map = shallowRef(null);// 初始化地图function initMap() {AMapLoader.load({key: "e6cf30fd79d7b556ee881ddd0281e8d0", // 申请好的Web端开发者Key,首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15plugins: ["AMap.Scale", //工具条,控制地图的缩放、平移等"AMap.ToolBar", //比例尺,显示当前地图中心的比例尺"AMap.Geolocation", //定位,提供了获取用户当前准确位置、所在城市的方法"AMap.HawkEye", //鹰眼,显示缩略图], // 需要使用的的插件列表,如比例尺'AMap.Scale'等}).then((AMap) => {let map = new AMap.Map("map", {//设置地图容器idzoom: 5, //初始化地图层级viewMode: "3D", //是否为3D地图模式center: [116.397436, 39.909165], //初始化地图中心点位置dragEnable: true, //禁止鼠标拖拽scrollWheel: true, //鼠标滚轮放大缩小doubleClickZoom: true, //双击放大缩小keyboardEnable: true, //键盘控制放大缩小移动旋转});map.setDefaultCursor("pointer"); //使用CSS默认样式定义地图上的鼠标样式(default/pointer/move/crosshair)map.addControl(new AMap.Scale()); //异步同时加载多个插件map.addControl(new AMap.ToolBar());map.addControl(new AMap.Geolocation());let HawkEye = new AMap.HawkEye({position: "LT", //控件停靠位置(LT/RT/LB/RB)});map.addControl(HawkEye);map.add(new AMap.Marker({position: map.getCenter(),}));// map.add(marker); // 地图添加标记AMapLoader.load({//可多次调用loadplugins: ["AMap.MapType"],}).then((AMap) => {map.addControl(new AMap.MapType());}).catch((e) => {console.error(e);});// 显示地图层级与中心点信息function logMapinfo() {let zoom = map.getZoom(); //获取当前地图级别let center = map.getCenter(); //获取当前地图中心位置document.querySelector("#map-zoom").innerText = zoom;document.querySelector("#map-center").innerText = center.toString();}//绑定地图移动与缩放事件map.on("moveend", logMapinfo);map.on("zoomend", logMapinfo);//为地图注册click事件获取鼠标点击出的经纬度坐标map.on("click", function (e) {document.getElementById("lnglat").value =e.lnglat.getLng() + "," + e.lnglat.getLat();});let infoWindow = new AMap.InfoWindow({//创建信息窗体isCustom: false, //使用自定义窗体anchor: "top-right", //信息窗体的三角所在位置content: `<h4>信息窗体</h4>`, //信息窗体的内容可以是任意html片段offset: new AMap.Pixel(16, -45),});infoWindow.open(map, [121.939253, 29.905078]); //填写想要窗体信息指示的坐标}).catch((e) => {console.log(e);});}// 调用地图初始化函数:onMounted 函数会在 DOM 初始化完成后调用,建议在 mounted 函数中调用地图初始化方法onMounted(() => {initMap();});return { map, initMap };
},
Vue3 + 高德地图相关推荐
- 十分钟玩转 vue3+高德地图AMap+geojson批量绘制Polygon地块数据展示【二、创建地图】
十分钟玩转 vue3+高德地图AMap+geojson批量绘制Polygon地块数据展示[二.创建地图] 在template标签内创建下列DOM 1.在template标签内,创建container的 ...
- H5之vue3+高德地图api
众所周知,在移动端app中,iOS定位和安卓定位都可以使用GPS,配合着高德,百度,腾讯的api可以很方便的处理定位,导航,路线规划等一系列问题,但是对于H5端的定位情况,却有些复杂. 浏览器定位是否 ...
- vue3实现高德地图多点标注(so easy)
vue3实现高德地图多点标注(so easy) 前言 思路清晰,抽丝剥茧 必要的准备工作 最简单的部分 处理数据之前(最关键的思路) 效果 完整代码 前言 非常感谢你能打开这篇博客,我想你一定是遇到了 ...
- vue3 引入高德地图实例
vue3高德地图进阶版 地图引入进阶 文章末尾有完整代码 关于vue项目如何引入高德地图以及一些基础用法见上一篇文章
- 【vue3引入高德地图】
vue3引入高德地图 文章目录 vue3引入高德地图 前言 一.准备工作 1.开发文档 2.添加应用 二.使用步骤 1.npm 安装 2.地图容器创建 3.组件引入 4.js api 安全密钥 5.初 ...
- Vue3 Echarts散点图+高德地图+卫星地图(一)——获取高德地图API
前言:在开发的过程中,对于Vue3的情况下,对于Echarts地图的文章操作很少,并且官方不通俗易懂,所以在此进行记录探索过程.还是一如既往贴近直接C/V操作,如果对于Echarts基本配置不会的同学 ...
- 基于高德地图实现vue3的移动端物流路线相关功能
基于高德地图实现vue3的移动端物流路线相关功能 自我记录 一.参考文档 高德地图开放平台: https://lbs.amap.com/ Web开发-JSAPI文档: https://lbs.amap ...
- vue3怎么引入高德地图
1.在高德开发平台申请你的key高德开发平台 2.在public/index.html引入高德的cdn <script type="text/javascript" src= ...
- vue3+ts+amap/amap-jsapi-loader实现高德地图搜索选取地点
1.安装amap/amap-jsapi-loader npm i amap-jsapi-loader --save 2.注册高德api 官网地址:高德开放平台 | 高德地图API (amap.com) ...
最新文章
- 长连接及在Node中的应用——HTTP/1.1 keep-alive
- FuncT、ActionT 的区别于说明
- RHEL5.3下搭建LAMP+Django环境(二)
- Python中的内存管理机制
- C#中new和override区别
- 第五章项目 体检套餐管理系统
- 如何利用shell脚本和client-go实现自己的k8s调度器
- 8086微型计算机结构功能,3.2 8086微处理器的功能结构
- tomcat无法正常shutdown
- 英文科技论文各部分的时态和语态
- 星际争霸1-PvPGN战网架设参数
- 王小云院士真地破解了 MD5 吗
- bbqsql安装使用踩坑总结
- 【硬核万字总结】看完这20道Redis面试题,女朋友都面上阿里了
- 大公司,一般都怎么开会?
- 大数据离线流程(小练习)
- 从阿里云邮箱迁移至网易邮箱
- 20X20 FCPX插件数字信息化故障干扰像素损坏风格英文标题模板GlitchAnimatedTypeface
- 【超简单实用教程】mkv、flv格式转mp4格式(附网盘资源)
- 基于几个多分类的算法实现中风预测(准确率95.5%)