百度地图API，如果做一个自定义样式的信息窗口？默认的框框太丑了

Posted 2023-04-01

参考技术A 修改对应的CSS

地图的四大基础问题(包含数据传输)

1.如何自定义窗口的信息窗口的样式。

2.如何从js中获取数据库内的数据

3.如何根据城市地区搜索

4.如何在地图上添加多个标注点

5.在每个标注点上加上一个onmouseover事件，出现自定义的信息窗口。

6.最后一条，也是现在没有解决的，如何城市地区搜索，只出现已注册过的地点。

先说说第一个问题，其实特别好解决，在百度地图的api中，已经给了一个demo

 1  var sContent =
 2 "<h4 style=‘margin:0 0 5px 0;padding:0.2em 0‘>天安门</h4>" +
 3 "<img style=‘float:right;margin:4px‘ id=‘imgDemo‘ src=‘http://app.baidu.com/map/images/tiananmen.jpg‘ width=‘139‘ height=‘104‘ title=‘天安门‘/>" +
 4 "<p style=‘margin:0;line-height:1.5;font-size:13px;text-indent:2em‘>天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...</p>" +
 5 "</div>";
 6     var map = new BMap.Map("allmap");
 7     var point = new BMap.Point(116.404, 39.915);
 8     var marker = new BMap.Marker(point);
 9     var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
10     map.centerAndZoom(point, 15);
11     map.addOverlay(marker);
12     marker.addEventListener("click", function () {
13         this.openInfoWindow(infoWindow);
14         //图片加载完毕重绘infowindow
15         document.getElementById(‘imgDemo‘).onload = function () {
16             infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
17         }
18     });

在这里sContent就是信息窗口的内容，可以自己编辑，所以第一个问题就轻松解决了。接下来就是如何从数据库内获取信息窗口要出现的内容，以及point

 

js里获取数据库内数据，个人感觉有俩种方式，一种是用ajax，另一种就是设置隐藏域。

这里用的是第二种方法，设置隐藏域。至于ajax，我会在解决问题六的同时尝试一下。应该不是大问题。

1 <input type="hidden" id="id1" runat="server"/>

后台代码：我将数据库内数据全部提取，然后在每一个属性之间用逗号分隔，每个元组之间用分号分隔。

 1 protected void select_venue()
 2     {
 3         ChanggBr chbr = new ChanggBr();
 4         List<Changg> chlist = chbr.GetAll();
 5 
 6         for (int i = 0; i < chlist.Count; i++)
 7         {
 8             if (i < chlist.Count - 1)
 9             {
10                 id1.Value += chlist[i].point1 + "," + chlist[i].point2 + "," + chlist[i].introduce + ";";
11             }
12             else
13             {
14                 id1.Value += chlist[i].point1 + "," + chlist[i].point2 + "," + chlist[i].introduce;
15 
16             }
17         }
18 
19     }

前台js:将后台的数据提取出来，然后再用split方法存入数据。问题2得到解决。通过数组同时解决了问题4.

 1   var arr = new Array();
 2         var objid1 = document.getElementById(‘<%= id1.ClientID %>‘);
 3         var str = objid1.value;
 4         arr = str.split(";");
 5 
 6         var point = new Array();     //存放标注点经纬信息的数组
 7         var marker = new Array();    //存放标注点对象的数组
 8         var info = new Array();       //存放提示信息窗口对象的数组
 9 
10         for (var i = 0; i < arr.length; i++) {
11             var p0 = arr[i].split(",")[0];        //
12             var p1 = arr[i].split(",")[1];
13             point[i] = new BMap.Point(p0, p1);       //循环生成新的地图点
14             marker[i] = new BMap.Marker(point[i]);      //按照地图点坐标生成标记
15             map.addOverlay(marker[i]);
16             info[i] = new BMap.InfoWindow(arr[i].split(",")[2]);
17             //marker[i].addEventListener("mouseover", function () { this.openInfoWindow(info[i]); });
18         }

接下来是问题3，如何根据城市地区搜索，这里需要一个二级的地区级联。之前有总结过，这里就不做详细总结。

 1 function _select() {
 2         var kindID = document.getElementById(‘<%= kind.ClientID %>‘);
 3         var cityID = document.getElementById(‘<%= city.ClientID %>‘);
 4         var areaID = document.getElementById(‘<%= area.ClientID %>‘);
 5         var objkind = kindID.options[kindID.selectedIndex].innerText;
 6         var objcity = cityID.options[cityID.selectedIndex].innerText;
 7         var objarea = areaID.options[areaID.selectedIndex].innerText;
 8         var place = objcity + objarea + objkind;
 9         var local = new BMap.LocalSearch("辽宁省", {
10             renderOptions: {
11                 map: map,
12                 panel: "r-result",
13                 autoViewport: true,
14                 selectFirstResult: false
15             }
16         });
17         local.search(place);
18     }

 1 protected void city_SelectedIndexChanged(object sender, EventArgs e)
 2     {
 3         area.Items.Clear();
 4         ListItem item = new ListItem();
 5 
 6         item.Text = "--地区--";
 7         item.Value = "-1";
 8         area.Items.Add(item);
 9 
10         PLACEBr placeBr = new PLACEBr();
11         List<PLACE> listarea = new List<PLACE>();
12         listarea = placeBr.GetAll();
13         int TypeID = int.Parse(city.SelectedValue);
14 
15         for (int i = 0; i < listarea.Count; i++)
16         {
17             if (listarea[i].PId != 0 && TypeID == listarea[i].PId)
18             {
19                 ListItem oItem = new ListItem();
20                 oItem.Value = listarea[i].PId.ToString();
21                 oItem.Text = listarea[i].Place;
22                 area.Items.Add(oItem);
23             }
24         }
25     }
26     protected void city_choose()
27     {
28         city.Items.Clear();
29         ListItem item = new ListItem();
30         item.Text = "--城市--";
31         item.Value = "-1";
32         city.Items.Add(item);
33         PLACEBr placebr = new PLACEBr();
34         List<PLACE> listType = new List<PLACE>();
35         listType = placebr.GetAll();
36         for (int i = 0; i < listType.Count; i++)
37         {
38             if (listType[i].PId == 0)
39             {
40                 ListItem oItem = new ListItem();
41                 oItem.Value = listType[i].id.ToString();
42                 oItem.Text = listType[i].Place;
43                 city.Items.Add(oItem);
44             }
45         }
46 
47     }
48     protected void kind_SelectedIndexChanged()
49     {
50         ListItem item = new ListItem();
51         string[] Kind = { "羽毛球馆", "足球馆", "篮球馆", "网球馆", "乒乓球馆" };
52         item.Text = "场馆选择";
53         item.Value = "-1";
54 
55         for (int i = 0; i < Kind.Length; i++)
56         {
57             ListItem oItem = new ListItem();
58             oItem.Value = i.ToString();
59             oItem.Text = Kind[i].ToString();
60             kind.Items.Add(oItem);
61         }
62     }

接下来就是第5个问题。其实我尝试过

1 for(var i=0; i<marker.length; i++){  
2 marker[i].addEventListener("mouseover", function(){  
3 this.openInfoWindow(info[i]); });  
4 }  

但是问题并没有得到解决。其实，this.openInfoWindow(info[i])中的i最后的值是marker.length-1.数组的下标是从0开始的，0,1,2……(N-1)以闭包方式解决的原因如下：i是外层的变量，是callback上层作用域的，callback执行的时候，for已经循环完了。创建一个闭包，相当于在内存中创建一个地方，专门存储起来。

 function _openInfoWindow() {
            this.openInfoWindow(this._infoWindow);
        }
        for (var i = 0; i < marker.length; ++i) {
            marker[i]._infoWindow = info[i];
            marker[i].addEventListener("mouseover", _openInfoWindow);
        }          

这样，问题5得到了解决。