百度地圖使用總結

一.目錄

• 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(, ) //偏離值
                    },
                    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)注意使用百度地圖的官方示例,一般情況下都能用