vue中高德地图限制拖拽地图的范围

秃头码猿

已于 2022-05-24 11:39:12 修改

阅读量1.7k

点赞数

文章标签： vue.js 前端

于 2022-05-17 10:44:04 首次发布

本文链接：https://blog.csdn.net/weixin_44221944/article/details/124816290

版权

本文介绍如何在Vue项目中使用高德地图，限制地图拖拽时的范围。针对二维和三维地图提供了不同的实现方法，涉及地图边界坐标获取及中心点经纬度判断。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文主要分为二维地图和三维地图方法
一、首先是二维地图
1、首先要在地图加载完成切中心点已确定的地方获取当前地图边界范围坐标
(我的map用的是全局map)

this.logMapBounds()
logMapBounds() {
   
   var bounds = this.map.getBounds();
     // 横纬竖经
     this.northa=bounds.northeast.toString()
     this.southa=bounds.southwest.toString()
     // console.log(bounds,this.northa,this.southa,'kikiki')
     this.map.on('dragend', this.showInfoDragend