mapboxGL中popup遮挡的优化
时间:2022-07-22
本文章向大家介绍mapboxGL中popup遮挡的优化,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
概述
在MapboxGL中,使用popup弹窗时,弹窗会出现超出范围的情况,本文就此问题做了点优化,共享记录下,一做自用,一做共享。
实现效果
实现代码
结合popup的open
事件,实现位置的调整。实现代码如下:
// 调整popup位置
that.popup.on('open', function(){
var ele = $(that.popup.getElement());
var offset = ele.offset();
var top = offset.top;
var left = offset.left;
var right = ele.width() + left;
var mapEle = $(map.getContainer());
var mapOffset = mapEle.offset();
var mapTop = mapOffset.top;
var mapLeft = mapOffset.left;
var mapRight = mapEle.width() + mapLeft;
var center = map.getCenter();
var centerPx = map.project(center);
var h = 0, v = 0, size = 20;
if(top < mapTop) {
v = mapTop - top + size;
}
if(left < mapLeft) {
h = mapLeft - left + size;
}
if(right > mapRight) {
h = mapRight - right - size;
}
centerPx = [centerPx.x - h, centerPx.y - v];
map.panTo(map.unproject(centerPx));
});
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 超详细的Java弹窗样式及使用教程【JOptionPane类详细使用教程】
- Python 技术篇-用PIL库旋转图片的两种方式,改变图像尺寸
- html+css+JavaScript例题
- 加速Github的访问及下载速度
- HDFS简介
- Python 技术篇-获取requests里的二进制文本并保存为音频、图片文件
- [转]maven的pom.xml详解
- Windows下给磁盘扩容
- ZooKeeper的安装
- 仿微信的网络聊天室项目开发【完整源码讲解】
- Chrome 小技巧
- 梳理Java IO流,攻破NIO的堡垒!【技术创作101训练营】
- hadoop2.6.0-HA-QJM
- hadoop常用维护命令
- 自定义Chrome等浏览器搜索引擎