百度地图使用总结

一.目录

• helloworld入门
• 使用各个功能总结
• 经验总结

二.helloworld入门

严格按照百度地图官方示例,就能入门(http://lbsyun.baidu.com/index.php?title=jspopular/guide/helloworld)

三.使用各个功能总结

1.初始化百度地图各个功能

按照官方示例就能初始化(http://lbsyun.baidu.com/index.php?title=jspopular/guide/widget)

2.画自定义点

需求如下:

(1)能够画自定义的图形的点,点位分为不同的业务类别
(2)所有的点能够被删除,拖动修改
(3)不同的业务类别点位都要能分类别显示或者隐藏
(4)点击点位能够弹出百度地图的信息框,显示一些点位信息

我是使用百度地图的工具条实现的画点画图形的功能

实现步骤如下:
(1)初始化工具条并绑定事件,绑定的事件中可以通过e.drawingMode区分画图模式,由此可以分别画点,图形

//实例化鼠标绘制工具
                that.myDrawingManager= new BMapLib.DrawingManager(that.map, {
                    isOpen: false, //是否开启绘制模式
                    enableDrawingTool: true, //是否显示工具栏
                    drawingToolOptions: {
                        anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                        offset: new BMap.Size(5, 5) //偏离值
                    },
                    circleOptions: that.styleOptions, //圆的样式
                    polylineOptions: that.styleOptions, //线的样式
                    polygonOptions: that.styleOptions, //多边形的样式
                    rectangleOptions: that.styleOptions //矩形的样式
                });
                //添加鼠标绘制工具监听事件，用于获取绘制结果
                that.myDrawingManager.addEventListener('overlaycomplete', that.drawZone);

//绑定的事件
drawZone:function (e) {
                var that = this;
                // 支持绘制矩形,多边形,点,不支持圆形,曲线
                if(e.drawingMode == "circle" || e.drawingMode == "polyline"){
                    util.errorTip("不支持画圆形和曲线");
                    that.map.removeOverlay(e.overlay);
                    return ;
                }
                //画点
                if(e.drawingMode == "marker"){
                    that.addStationByTool(e);
                }
                //画多边形,画矩形
                if(e.drawingMode == "polygon" || e.drawingMode == "rectangle"){
                    that.addZone(e);
                }
            }

(2)画点,可以参考官方文档示例,但是因为是所有的点位要按照类别进行显示或者隐藏功能,所以在添加的时候,需要将添加的点位都保存到一个数组中,以备显示或者隐藏功能实现.
(3)注册拖动事件,我是通过绑定点位的右击事件完成的,这里的updateStation事件中会被传入3个参数pt,px,marker,分别代表点位的坐标,页面的像素坐标,和点位本身;因为点位要做拖动修改,所以点位的一些信息(如id)在画点的时候可以被绑定到点位上,方式和普通js对象添加属性相同(obj[“id”]=id;)

//绑定右击事件
                    var markerMenu=new BMap.ContextMenu();
                    markerMenu.addItem(new BMap.MenuItem('删除此站点',that.deleteStation.bind(marker)));
                    markerMenu.addItem(new BMap.MenuItem('修改此站点开始(拖动)',marker.enableDragging.bind(marker)));
                    markerMenu.addItem(new BMap.MenuItem('修改此站点完成',that.updateStation.bind(marker)));
                    marker.addContextMenu(markerMenu);

(4)删除同修改步骤
(5)点击点位显示信息框,注意如果一下子添加多个点的话,需要使用百度地图的给多个点添加信息框的示例

4.经验总结

(1)由于百度地图不能清晰的获取地图上自己所画的点(或者我没有找到),所以我将自己所画的点都增加到一个数组中,图形也是如此,方便后面做显示和隐藏操作
(2)注意使用百度地图的官方示例,一般情况下都能用