前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >mapboxGL中popup遮挡的优化

mapboxGL中popup遮挡的优化

作者头像
lzugis
发布2020-07-29 15:48:12
7190
发布2020-07-29 15:48:12
举报

概述

在MapboxGL中,使用popup弹窗时,弹窗会出现超出范围的情况,本文就此问题做了点优化,共享记录下,一做自用,一做共享。

实现效果

GIF.gif
GIF.gif

实现代码

结合popup的open事件,实现位置的调整。实现代码如下:

代码语言:javascript
复制
// 调整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));
});
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-07-28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 概述
  • 实现效果
  • 实现代码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档