基于百度地图API实现多样式信息窗口

应用场景

本代码适用于需要在地图上展示丰富信息内容的场景，例如展示POI详情、周边搜索结果、导航信息等。

基本功能

此代码实现了基于百度地图API的多样式信息窗口功能，允许用户自定义信息窗口的外观和内容。用户可以通过点击按钮切换不同的信息窗口样式，包括标题、内容、尺寸、搜索面板等。

功能实现步骤及关键代码分析

1. 加载百度地图API

   await Promise.all([
     this.loadScripts([
       'https://api.map.baidu.com/api?type=subway&v=1.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240319170303',
       'http://api.map.baidu.com/getscript?v=2.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240319170303',
       'https://mapopen.bj.bcebos.com/github/BMapGLLib/InfoBox/src/InfoBox.js',
       'https://mapopen.bj.bcebos.com/github/BMapGLLib/RichMarker/src/RichMarker.min.js',
       'https://mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js',
       'https://mapopen.cdn.bcebos.com/github/BMapGLLib/DistanceTool/src/DistanceTool.min.js',
       'https://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js',
     ]),
     this.loadStyles([
       'http://api.map.baidu.com/res/webgl/10/bmap.css',
       'http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css',
       'http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css',
     ]),
   ])
   

   加载必要的百度地图API和样式文件。

2. 初始化百度地图

   var map = new BMap.Map('allmap')
   var poi = new BMap.Point(116.307852, 40.057031)
   map.centerAndZoom(poi, 16)
   map.enableScrollWheelZoom()
   

   创建百度地图实例，设置中心点和缩放级别，并启用鼠标滚轮缩放。

3. 创建信息窗口

   var content =
     '<div style="margin:0;line-height:20px;padding:2px;">' +
     '<img src="../img/baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
     '地址：北京市海淀区上地十街10号<br/>电话：(010)59928888<br/>简介：百度大厦位于北京市海淀区西二旗地铁站附近，为百度公司综合研发及办公总部。' +
     '</div>'
   
   var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
     title: '百度大厦', //标题
     width: 290, //宽度
     height: 105, //高度
     panel: 'panel', //检索结果面板
     enableAutoPan: true, //自动平移
     searchTypes: [
       BMAPLIB_TAB_SEARCH, //周边检索
       BMAPLIB_TAB_TO_HERE, //到这里去
       BMAPLIB_TAB_FROM_HERE, //从这里出发
     ],
   })
   

   创建信息窗口，设置内容、标题、尺寸、搜索面板、自动平移和搜索类型。

4. 创建标注并绑定信息窗口

   var marker = new BMap.Marker(poi) //创建marker对象
   marker.enableDragging() //marker可拖拽
   marker.addEventListener('click', function (e) {
     searchInfoWindow.open(marker)
   })
   map.addOverlay(marker) //在地图中添加marker
   

   创建标注，启用拖拽，并绑定信息窗口。

5. 创建不同样式的信息窗口

   //样式1
   var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, '信息框1内容', {
     title: '信息框1', //标题
     panel: 'panel', //检索结果面板
     enableAutoPan: true, //自动平移
     searchTypes: [
       BMAPLIB_TAB_FROM_HERE, //从这里出发
       BMAPLIB_TAB_SEARCH, //周边检索
     ],
   })
   function openInfoWindow1() {
     searchInfoWindow1.open(new BMap.Point(116.319852, 40.057031))
   }
   //样式2
   var searchInfoWindow2 = new BMapLib.SearchInfoWindow(map, '信息框2内容', {
     title: '信息框2', //标题
     panel: 'panel', //检索结果面板
     enableAutoPan: true, //自动平移
     searchTypes: [
       BMAPLIB_TAB_SEARCH, //周边检索
     ],
   })
   function openInfoWindow2() {
     searchInfoWindow2.open(new BMap.Point(116.324852, 40.057031))
   }
   //样式3
   var searchInfoWindow3 = new BMapLib.SearchInfoWindow(map, '信息框3内容', {
     title: '信息框3', //标题
     width: 290, //宽度
     height: 40, //高度
     panel: 'panel', //检索结果面板
     enableAutoPan: true, //自动平移
     searchTypes: [],
   })
   function openInfoWindow3() {
     searchInfoWindow3.open(new BMap.Point(116.328852, 40.057031))
   }
   

   创建不同样式的信息窗口，设置标题、内容、尺寸、搜索面板、自动平移和搜索类型。

总结与展望

通过本代码，可以轻松实现多样式的信息窗口功能，满足不同的展示需求。

未来，该功能可以进一步拓展和优化，例如：

• 支持自定义信息窗口模板，实现更灵活的内容展示；
• 集成更多百度地图API，提供更多功能，如导航、周边搜索、POI详情等；
• 优化代码结构和性能，提高代码的可维护性和执行效率。