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

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