地图缩放或移动后,如何保持自定义弹窗位置不变?
要实现地图缩放或移动后获取之前点击的点的位置,可以通过以下步骤来实现:
- 
在地图上点击一点时,获取点击点的经纬度坐标,并将其保存到一个变量中。 
- 
监听地图的缩放和移动事件。当地图发生缩放或移动时,触发相应的事件处理函数。 
- 
在事件处理函数中,获取之前保存的点击点的经纬度坐标,并使用地图的API方法转换为像素坐标。 
- 
根据当前地图的缩放和移动的情况,计算出点击点在地图上的新位置。 
- 
更新自定义弹窗的位置,将其移动到新的位置上。 
下面是一个示例代码,使用百度地图API来实现上述功能:
// 保存点击点的经纬度坐标
var clickedPoint = null;
// 监听地图的点击事件
map.addEventListener('click', function(e) {
  clickedPoint = e.point;
  // 打开自定义弹窗
  openCustomPopup(clickedPoint);
});
// 监听地图的缩放和移动事件
map.addEventListener('zoomend', updateCustomPopupPosition);
map.addEventListener('moveend', updateCustomPopupPosition);
// 打开自定义弹窗的函数
function openCustomPopup(point) {
  // 在指定点上打开自定义弹窗
  // ...
}
// 更新自定义弹窗位置的函数
function updateCustomPopupPosition() {
  if (clickedPoint) {
    // 将点击点的经纬度坐标转换为像素坐标
    var pixel = map.pointToPixel(clickedPoint);
    
    // 根据当前地图的缩放和移动情况,计算出点击点在地图上的新位置
    var newPixel = new BMap.Pixel(pixel.x + offsetX, pixel.y + offsetY);
    
    // 将新的像素坐标转换为经纬度坐标
    var newPosition = map.pixelToPoint(newPixel);
    
    // 更新自定义弹窗的位置
    updatePopupPosition(newPosition);
  }
}
// 更新自定义弹窗位置的函数
function updatePopupPosition(position) {
  // 更新自定义弹窗的位置
  // ...
}
在上面的示例代码中,clickedPoint变量用于保存点击点的经纬度坐标。当地图发生缩放或移动时,会调用updateCustomPopupPosition函数来更新自定义弹窗的位置。在该函数中,首先将点击点的经纬度坐标转换为像素坐标,然后根据当前地图的缩放和移动情况,计算出点击点在地图上的新位置。最后,将新的位置坐标传递给updatePopupPosition函数,用于更新自定义弹窗的位置。
原文地址: https://www.cveoy.top/t/topic/p4yg 著作权归作者所有。请勿转载和采集!