最近用百度地图api做点东西,虽然到现在还有一个问题没有解决,但是还是觉得先总结一下。
遇到的问题有六:
1.如何自定义窗口的信息窗口的样式。
2.如何从js中获取数据库内的数据
3.如何根据城市地区搜索
4.如何在地图上添加多个标注点
5.在每个标注点上加上一个onmouseover事件,出现自定义的信息窗口。
6.最后一条,也是现在没有解决的,如何城市地区搜索,只出现已注册过的地点。
先说说第一个问题,其实特别好解决,在百度地图的api中,已经给了一个demo
var sContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>天安门</h4>" +
"<img style='float:right;margin:4px' id='imgDemo' src='http://app.baidu.com/map/images/tiananmen.jpg' width='139' height='104' title='天安门'/>" +
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...</p>" +
"</div>";
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
var marker = new BMap.Marker(point);
var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
map.centerAndZoom(point, 15);
map.addOverlay(marker);
marker.addEventListener("click", function () {
this.openInfoWindow(infoWindow);
//图片加载完毕重绘infowindow
document.getElementById('imgDemo').onload = function () {
infoWindow.redraw(); //防止在网速较慢,图片未加载时,生成的信息框高度比图片的总高度小,导致图片部分被隐藏
}
});
在这里sContent就是信息窗口的内容,可以自己编辑,所以第一个问题就轻松解决了。接下来就是如何从数据库内获取信息窗口要出现的内容,以及point
js里获取数据库内数据,个人感觉有俩种方式,一种是用ajax,另一种就是设置隐藏域。
这里用的是第二种方法,设置隐藏域。至于ajax,我会在解决问题六的同时尝试一下。应该不是大问题。
<input type="hidden" id="id1" runat="server"/>
后台代码:我将数据库内数据全部提取,然后在每一个属性之间用逗号分隔,每个元组之间用分号分隔。protected void select_venue()
{
ChanggBr chbr = new ChanggBr();
List<Changg> chlist = chbr.GetAll();
for (int i = 0; i < chlist.Count; i++)
{
if (i < chlist.Count - 1)
{
id1.Value += chlist[i].point1 + "," + chlist[i].point2 + "," + chlist[i].introduce + ";";
}
else
{
id1.Value += chlist[i].point1 + "," + chlist[i].point2 + "," + chlist[i].introduce;
}
}
}
前台js:将后台的数据提取出来,然后再用split方法存入数据。问题2得到解决。通过数组同时解决了问题4.
var arr = new Array();
var objid1 = document.getElementById('<%= id1.ClientID %>');
var str = objid1.value;
arr = str.split(";");
var point = new Array(); //存放标注点经纬信息的数组
var marker = new Array(); //存放标注点对象的数组
var info = new Array(); //存放提示信息窗口对象的数组
for (var i = 0; i < arr.length; i++) {
var p0 = arr[i].split(",")[0]; //
var p1 = arr[i].split(",")[1];
point[i] = new BMap.Point(p0, p1); //循环生成新的地图点
marker[i] = new BMap.Marker(point[i]); //按照地图点坐标生成标记
map.addOverlay(marker[i]);
info[i] = new BMap.InfoWindow(arr[i].split(",")[2]);
//marker[i].addEventListener("mouseover", function () { this.openInfoWindow(info[i]); });
}
接下来是问题3,如何根据城市地区搜索,这里需要一个二级的地区级联。之前有总结过,这里就不做详细总结。、
function _select() {
var kindID = document.getElementById('<%= kind.ClientID %>');
var cityID = document.getElementById('<%= city.ClientID %>');
var areaID = document.getElementById('<%= area.ClientID %>');
var objkind = kindID.options[kindID.selectedIndex].innerText;
var objcity = cityID.options[cityID.selectedIndex].innerText;
var objarea = areaID.options[areaID.selectedIndex].innerText;
var place = objcity + objarea + objkind;
var local = new BMap.LocalSearch("辽宁省", {
renderOptions: {
map: map,
panel: "r-result",
autoViewport: true,
selectFirstResult: false
}
});
local.search(place);
}
protected void city_SelectedIndexChanged(object sender, EventArgs e)
{
area.Items.Clear();
ListItem item = new ListItem();
item.Text = "--地区--";
item.Value = "-1";
area.Items.Add(item);
PLACEBr placeBr = new PLACEBr();
List<PLACE> listarea = new List<PLACE>();
listarea = placeBr.GetAll();
int TypeID = int.Parse(city.SelectedValue);
for (int i = 0; i < listarea.Count; i++)
{
if (listarea[i].PId != 0 && TypeID == listarea[i].PId)
{
ListItem oItem = new ListItem();
oItem.Value = listarea[i].PId.ToString();
oItem.Text = listarea[i].Place;
area.Items.Add(oItem);
}
}
}
protected void city_choose()
{
city.Items.Clear();
ListItem item = new ListItem();
item.Text = "--城市--";
item.Value = "-1";
city.Items.Add(item);
PLACEBr placebr = new PLACEBr();
List<PLACE> listType = new List<PLACE>();
listType = placebr.GetAll();
for (int i = 0; i < listType.Count; i++)
{
if (listType[i].PId == 0)
{
ListItem oItem = new ListItem();
oItem.Value = listType[i].id.ToString();
oItem.Text = listType[i].Place;
city.Items.Add(oItem);
}
}
}
protected void kind_SelectedIndexChanged()
{
ListItem item = new ListItem();
string[] Kind = { "羽毛球馆", "足球馆", "篮球馆", "网球馆", "乒乓球馆" };
item.Text = "场馆选择";
item.Value = "-1";
for (int i = 0; i < Kind.Length; i++)
{
ListItem oItem = new ListItem();
oItem.Value = i.ToString();
oItem.Text = Kind[i].ToString();
kind.Items.Add(oItem);
}
}
接下来就是第5个问题。其实我尝试过
for(var i=0; i<marker.length; i++){
marker[i].addEventListener("mouseover", function(){
this.openInfoWindow(info[i]); });
}
但是问题并没有得到解决。其实,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得到了解决。