百度地图离线开发demo-弹窗相关，边界问题

oliver666666

已于 2023-05-09 11:44:57 修改

阅读量196

点赞数

分类专栏：百度地图离线3.0+百度瓦片+vue 文章标签： java servlet html

于 2022-12-01 10:04:10 首次发布

本文链接：https://blog.csdn.net/oliver666666/article/details/128126984

版权

百度地图离线3.0+百度瓦片+vue 专栏收录该内容

7 篇文章 4 订阅 ¥9.90 ¥99.00

订阅专栏

博客内容讲述了在百度地图离线开发中遇到的弹窗边界避让问题。作者提到原生API的infowindow效果不佳，故选择自定义一个不依赖地图API的弹窗组件。通过获取经纬度并转换为浏览器定位像素单位，进行边界计算，以实现弹窗的正确绝对定位，从而解决地图偏移问题。

摘要由CSDN通过智能技术生成

demo内容有：（海量数据地图绘制，迁徙图，弹窗边界避让的问题，热力图，初始化离线地图），有需要可以评论问我。。。。demo列的都是我有写过，并且实现的。有需求也可以说。我有时间写demo。瓦片没有找到免费的！我也没找到！可以自行找免费的瓦片！

通常结合地图开发，地图两侧（绝对定位漂移在地图上方），上下，基本都会有对应的边界，展示一些统计信息，或者头部div。原生api有对应的弹窗infowindow，但是效果不好用，没有躲避边界，或者就是躲避边界，会让地图偏移，与需求不大相符，因此，我的做法是，自定义一个不使用地图的弹窗api，自定义组件

通过地图上的点击，获取对应的经纬度，再将经纬度转换为浏览器的定位px单位，在进行边界计算，从而设置弹窗的绝对定位，来解决边界问题

<template>
  <div class="bd-map-component">
    <div
      id="baiduMap"
    />
    <map-info-window
      :style-obj="styleObj"
      :info-window-visible.sync="infoWindowVisible"
    >
      <slot />
    </map-info-window>
  </div>
</template>

其中，mapinfowindow为弹窗插槽

// 地图div宽高
const boxSize = this.map.getSize()
// 测试下 与pointToPixel转换是相同的 像素坐标
let pixel = null
if (typeof (point.lng) === 'undefined') {
  pixel = this.map.pointToPixel({ lng: 118.138979, lat: 24.497246 })
} else {
  pixel = this.map.pointToPixel({ lng: point.lng, lat: point.lat })
}
this.styleObj = {
  width: 500,
  height: 300,
  top: pixel.y,
  left: pixel.x,
  boxWidth: boxSize.width,
  boxHeight: boxSize.height
}
this.infoWindowVisible = true

因为布局关系，本例没有计算边界，后续ol例子会计算边界