限制百度地图拖动范围限制，当超如范围时自动返回

我会带着你远行 2023-10-11 15:27 52阅读 0赞

限制百度地图拖动范围限制，当超如范围时自动返回  
背景  
最近利用百度离线地图加载世界地图，但发现下载的区域只是世界地图一块，当拖动地图范围超过想要的范围时，就会出现背景块为白色；  
如图

解决思路1：百度api开发小案例中给出的方案

<script type="text/javascript">  
layer.msg('将地图显示范围设定在指定区域，地图拖出该区域后会重新弹回');

//百度地图API功能  
var map = new BMap.Map("map\_demo");  
map.centerAndZoom(new BMap.Point(116.404, 39.915), 8);  
map.enableScrollWheelZoom();  
var b = new BMap.Bounds(new BMap.Point(116.027143, 39.772348),new BMap.Point(116.832025, 40.126349));  
try \{  
BMapLib.AreaRestriction.setBounds(map, b);  
\} catch (e) \{  
alert(e);  
\}  
</script>  
  
问题：这种在拖动中依然可以移除范围，看到边界外白色区域。  
解决思路2：根据地图拖动事件，判断地图拖动的范围和中心点，当地图可视范围超过切片范围时，重新定位中心点和层级，保证在范围内的边界。

var extent=new Object();  
extent.minX="-180.380133";  
extent.maxX="177.557674";  
extent.minY="-80.395352";  
extent.maxY="86";  
map.addEventListener("dragging",function(type, target)\{  
if(extent.minY>this.getBounds().getSouthWest().lat)\{  
if(type.currentTarget.ef.lat<-61.888492)\{  
centerAndZoom(this.getBounds().getCenter().lng,-85.2670845,this.getZoom());  
\}  
\};  
if(extent.maxY>this.getBounds().getNorthEast().lat)\{  
if(type.currentTarget.ef.lat>78.437445)\{  
centerAndZoom(this.getBounds().getCenter().lng,85.2670845,this.getZoom());  
\}  
\}  
\});  
  
通过不断计算和测试中心点确保地图查看全球地图都是在切片范围内的。

发表评论取消回复

表情：

评论列表（有 0 条评论，52人围观）

还没有评论，来说两句吧...

相关阅读

相关限制百度地图拖动范围限制，当超如范围时自动返回

限制百度地图拖动范围限制，当超如范围时自动返回背景最近利用百度离线地图加载世界地图，但发现下载的区域只是世界地图一块，当拖动地图范围超过想要的范围时，就会出现背景块

我会带着你远行/ 2023年10月11日 15:27/ 0 赞/ 53 阅读

相关【百度地图】使用百度地图API爬取小区名字并获取小区范围边界

获取小区名字 -- coding: utf-8 -- import numpy as np 导入数值计算扩展模块 import r

小鱼儿/ 2023年06月29日 10:45/ 0 赞/ 12 阅读

相关 layDate 时间范围限制开始时间小于结束时间

var startDate=laydate.render({ elem: 'start', done:function(valu

本是古典何须时尚/ 2022年12月01日 15:50/ 0 赞/ 377 阅读

相关 My97DatePicker日期范围限制

[My97DatePicker日期范围限制][My97DatePicker] 1.动态时间范围限制：可以通过系统给出的动态变量，如%y(当前年)，%M(当

我会带着你远行/ 2022年08月21日 01:19/ 0 赞/ 299 阅读

相关 java四种修饰符的限制范围

<table> <tbody> <tr> <th>访问权限</th> <th>本类</th> <th>本包</th> <th>不同包子

阳光穿透心脏的1/2处/ 2022年05月19日 20:35/ 0 赞/ 202 阅读

相关 My97DatePicker日期范围限制

[My97DatePicker日期范围限制][My97DatePic

妖狐艹你老母/ 2022年05月15日 15:09/ 0 赞/ 395 阅读

相关百度地图查询视野范围内的建筑物（二）

本篇博客主要的研究内容主要解决基于使用键盘上下左右键时，无法触发百度地图的MoveFinished的事件的问题。百度地图查询视野范围内的建筑物参看博客http://blog.c

叁歲伎倆/ 2022年01月17日 07:11/ 0 赞/ 314 阅读

相关百度地图查询视野范围内的建筑物

根据用户移动地图的位置，显示在视野范围内的建筑物，简单的思路是，添加地图监听，当地图移动结束之后，计算出当前屏幕四个角的GeoPoint，根据这4个点，通过mysql的s

缺乏、安全感/ 2022年01月17日 00:27/ 0 赞/ 498 阅读

相关 antDesign RangePicker限制日期可选范围

上代码： import React from 'react'; import ReactDOM from 'react-dom'; import 'a

╰半橙微兮°/ 2021年09月30日 03:36/ 0 赞/ 2033 阅读

相关百度地图之根据显示范围获取地图图片

根据地图可视经纬度查询区域范围示例如下： //根据显示范围获得地图图片 function getMapImg(succfun){ //var

妖狐艹你老母/ 2021年09月28日 02:50/ 0 赞/ 608 阅读