百度地圖 顯示,定位,輪廓圖


initMap: function () {
        var me = this;

        var map = new BMap.Map(me.gisBaiduMap);//在百度地圖容器中創建一個地圖
        //創建和初始化地圖函數:
        createMap();//創建地圖
        setMapEvent();//設置地圖事件
        addMapControl();//向地圖添加控件


        //創建地圖函數:
        function createMap() {

            var point = new BMap.Point(121.607973,31.18491);//定義一個中心點坐標
            map.centerAndZoom(point, 11);//設定地圖的中心點和坐標並將地圖顯示在地圖容器中
            me.myMap = map;//將map變量存儲在當前Controller全局中
        }

        //地圖事件設置函數:
        function setMapEvent() {
            map.enableDragging();//啟用地圖拖拽事件,默認啟用(可不寫)
            map.enableScrollWheelZoom();//啟用地圖滾輪放大縮小
            map.enableDoubleClickZoom();//啟用鼠標雙擊放大,默認啟用(可不寫)
            map.enableKeyboard();//啟用鍵盤上下左右鍵移動地圖
        }

        //地圖控件添加函數:
        function addMapControl() {
            //向地圖中添加縮放控件
            var ctrl_nav = new BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                type: BMAP_NAVIGATION_CONTROL_LARGE
            });
            map.addControl(ctrl_nav);
            //向地圖中添加縮略圖控件
            var ctrl_ove = new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1});
            map.addControl(ctrl_ove);
            //向地圖中添加比例尺控件
            var ctrl_sca = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
            map.addControl(ctrl_sca);
        }
    },
    //添加事件監聽
    mapAddEventListener: function () {
        var me = this;
        me.myMap.removeOverlay(me.addMarker);
        var clickEvent = function (e) {
            if (me.view.getUIStatus() != "VIEW") {
                me.view.getCmp("editPanel->longitude").sotValue(e.point.lng);
                me.view.getCmp("editPanel->latitude").sotValue(e.point.lat);
                var point = new BMap.Point(e.point.lng, e.point.lat); //將標注點轉化成地圖上的點
                //
                var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
                    offset: new BMap.Size(10, 25), // 指定定位位置
                    imageOffset: new BMap.Size(0, 0 - 10 * 25) // 設置圖片偏移
                });
                me.myMap.removeOverlay(me.addMarker);
                me.addMarker = new BMap.Marker(point, {icon: myIcon}); //將點轉化成標注點
                me.myMap.addOverlay(me.addMarker);  //將標注點添加到地圖上
            }
        }
        me.myMap.addEventListener("click", clickEvent);
    },
    //查看數據時定位
    positionMap: function (retData) {
        var me = this;
        if (retData.longitude) {
            var bdLng = retData.longitude;
            var bdLat = retData.latitude;
            var point = new BMap.Point(bdLng, bdLat); //將標注點轉化成地圖上的點
            var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
                offset: new BMap.Size(10, 25), // 指定定位位置
                imageOffset: new BMap.Size(0, 0 - 10 * 25) // 設置圖片偏移
            });
            me.addMarker = new BMap.Marker(point, {icon: myIcon}); //將點轉化成標注點

            me.myMap.addOverlay(me.addMarker);  //將標注點添加到地圖上

            me.myMap.centerAndZoom(point, 13);
        }
    },
    //描繪省份輪廓線
    addSCBorder:function () {
        var blist = [];

        /**
         * 添加行政區划
         * @param {} districtName 行政區划名
         * @returns  無返回值
         */
        function addDistrict(districtName) {
            var me = this;
            //使用計數器來控制加載過程
            //使用百度接口加載邊界經緯度數據
            var bdary = new BMap.Boundary();
            bdary.get(districtName, function (rs) {       //獲取行政區域
                blist.push({points: rs.boundaries[0], name: districtName});
                drawBoundary();
            });
        }

        function drawBoundary() {
            //包含所有區域的點數組
            var pointArray = [];

            /*畫遮蔽層的相關方法
             *思路: 首先在中國地圖最外畫一圈,圈住理論上所有的中國領土,然后再將每個閉合區域合並進來,並全部連到西北角。
             *      這樣就做出了一個經過多次西北角的閉合多邊形*/
            //定義中國東南西北端點,作為第一層
            var pNW = {lat: 59.0, lng: 73.0};
            var pNE = {lat: 59.0, lng: 136.0};
            var pSE = {lat: 3.0, lng: 136.0};
            var pSW = {lat: 3.0, lng: 73.0};
            //向數組中添加一次閉合多邊形,並將西北角再加一次作為之后畫閉合區域的起點
            var pArray = [];
            pArray.push(pNW);
            pArray.push(pSW);
            pArray.push(pSE);
            pArray.push(pNE);
            pArray.push(pNW);
            //循環添加各閉合區域
            //添加顯示用標簽層
            var label = new BMap.Label(blist[0].name, {offset: new BMap.Size(20, -10)});
            label.hide();
            map.addOverlay(label);

            //添加多邊形層並顯示
            var ply = new BMap.Polygon(blist[0].points, {
                strokeWeight: 2,
                strokeColor: "#FF0000",
                fillOpacity: 0.01,
                fillColor: " #FFFFFF"
            }); //建立多邊形覆蓋物
            ply.name = blist[0].name;
            ply.label = label;
            ply.Type = "Border";
            map.addOverlay(ply);

            //將點增加到視野范圍內
            var path = ply.getPath();
            pointArray = pointArray.concat(path);
            //將閉合區域加到遮蔽層上,每次添加完后要再加一次西北角作為下次添加的起點和最后一次的終點
            pArray = pArray.concat(path);
            pArray.push(pArray[0]);

            //限定顯示區域,需要引用api庫
            try {
                map.setViewport(pointArray);    //調整視野
            } catch (err) {
                console.log(err)
            }


            //添加遮蔽層
            var plyall = new BMap.Polygon(pArray, {
                strokeOpacity: 0.0000001,
                strokeColor: "#04121b",
                strokeWeight: 0.00001,
                fillColor: "#04121b",
                fillOpacity: 0.7
            }); //建立多邊形覆蓋物
            plyall.Type = "Border";
            map.addOverlay(plyall);

        }

        addDistrict("上海市浦東新區")
    },

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM