百度地图点击marker点弹出一个自定义div的实现

 时间:2026-04-23 00:12:01

1、创建一个html空文档

百度地图点击marker点弹出一个自定义div的实现

2、编写html代码,并引用百度地图脚本文件

创建地图容器、地图样式

百度地图点击marker点弹出一个自定义div的实现

3、初始化地图参数,初始地图坐标,当前地图显示的中心点

弹出信息窗口参数等;

百度地图点击marker点弹出一个自定义div的实现

4、分别创建两个Maker标注(两个相邻坐标点),并监听它们的click事件,将click事件的回调函数通过参数传给addMaker函数。

百度地图点击marker点弹出一个自定义div的实现

5、处理Maker的点击事件A,弹处地图自带的消息窗体,并显示消息内容,弹窗显示到当前标注的Maker的坐标点

百度地图点击marker点弹出一个自定义div的实现

百度地图点击marker点弹出一个自定义div的实现

6、处理Maker的点击事件B,再第二个点击事件中,我们创建了一个自定义的div容器,并将坐标转为网页的具体位置,显示出自定义div;

百度地图点击marker点弹出一个自定义div的实现

百度地图点击marker点弹出一个自定义div的实现

7、地图自带的弹窗显示之后会自动隐藏掉,但自定义的div也需要代码来手动隐藏,那就是监听map的click事件,然后隐藏div。

  • 上传文件框怎么美化
  • 简单基础网站页面制作
  • 怎么批量替换多个HTML内的链接或者路径
  • html+css3+jquery旅游网站左侧分类导航
  • 解决Win10网页不能输入中文的问题
  • 热门搜索
    泉州旅游攻略 徐州旅游景点 内蒙旅游景点 冬天旅游 房山旅游景点大全 下川岛旅游攻略 日本福冈旅游 洛杉矶旅游攻略 连云港旅游景点 端午旅游好去处