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

 时间:2026-02-16 18:41:10

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网页不能输入中文的问题
  • 热门搜索
    桂林旅游网站 国庆旅游攻略 春节旅游去哪里 夏天去哪旅游好 韩国济州岛旅游攻略 广东阳江旅游 马来西亚旅游地图 东北三省旅游攻略 旅游管理专业描述 攀枝花旅游景点大全