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得到了解决。
