关于百度地图api的阶段总结

本文概述了使用百度地图API进行应用开发的过程,包括窗口样式定制、数据库数据获取、地图搜索、多点标注及信息窗口交互等功能实现,并讨论了城市地区搜索限制问题的解决方法。同时介绍了从数据库获取信息窗口内容、点坐标与提示信息的存储与显示,以及通过二级地区级联进行搜索的实现。最后解决了鼠标悬停触发自定义信息窗口的难题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近用百度地图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得到了解决。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值