vue實現 地圖只顯示幾個省份

一、開場白

今天給大家說一說百度地圖如何只顯示一個省份，或者幾個省份，再說大點就是那個國家。

二、操作

1. 引入js，vue和jquery自己去下載一個

    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=CIssYEHtXA28ej0NoFeqfnGPZrlu4nqZ"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
<script type="text/javascript" src="../../../script/vue/vue.min.js"></script>
<script type="text/javascript" src="../../../script/jquery/jquery-3.5.1.min.js"></script>

2. 寫一個地圖div，我這邊是將vue.js引入了html中

<div id="vue-app">
        <div id="map1" style="width:100% ； overflow:hidden;" ></div>
</div>

//vue的使用

var app;
        app = new Vue({
        el: '#vue-app1',
        data: {
        },
        mounted: function() {
        },
        methods: {}

3. data中定義參數

  data: {

          districtLoading: 0,
          blist: [],
          styles:{
            width: '100%',
            height: ''
}

4. 調用map

  mounted: function() {
            var _seft = this;
            _seft.map();
        },

5. 寫map（），寫在 methods下面

map :function(){
              var _seft = this;
                _seft.map1();
            
            },
           
            map1: function() {
                var _seft = this;
                _seft.createMap("map1");
            },
           
            createMap: function(idName) {
                var _seft = this;
                // 百度地圖API功能
                var map = new BMap.Map(idName); // 創建Map實例
                var point = new BMap.Point(106.404, 19.915);
                map.centerAndZoom(point, 1); // 初始化地圖,設置中心點座標和地圖級別
                map.enableScrollWheelZoom(true); //開啓鼠標滾輪縮放
              	map.enableScrollWheelZoom();
                _seft.getBoundary(map);
                
            },
            getBoundary: function(map) {
              var _seft = this;
                  _seft.addDistrict("甘肅省",map);
                  _seft.addDistrict("陝西省",map);

            },

            /**
             * 添加行政區劃
             * @param {} districtName 行政區劃名
             * @returns  無返回值
             */
            addDistrict: function (districtName,map) {
              console.log("<>"+districtName);
              var _seft = this;
                //使用計數器來控制加載過程
                _seft.districtLoading++;
                var bdary = new BMap.Boundary();
                bdary.get(districtName, function (rs) {       //獲取行政區域
                    var count = rs.boundaries.length; //行政區域的點有多少個
                    console.log("////"+JSON.stringify(rs));
                    if (count === 0) {
                        alert('未能獲取當前輸入行政區域');
                        return;
                    }
                    for (var i = 0; i < count; i++) {
                        _seft.blist.push({ points: rs.boundaries[i], name: districtName });
                    };
                    //加載完成區域點後計數器-1
                    _seft.districtLoading--;
                    if (_seft.districtLoading == 0) {
                        //全加載完成後畫端點
                        _seft.drawBoundary(map);
                    }
                });
            },

            /**
             * 各種鼠標事件綁定
             */
             click: function(evt) {
                alert(evt.target.name);
            },

             mouseover: function(evt) {
                evt.target.label.setZIndex(99);
                evt.target.label.setPosition(evt.point);
                evt.target.label.show();
            },

             mousemove: function(evt) {
                evt.target.label.setPosition(evt.point);
            },

             mouseout: function(evt) {
                evt.target.label.hide();
            },

            drawBoundary :function(map) {
              var _seft = this;
                //包含所有區域的點數組
                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);
                //循環添加各閉合區域
                for (var i = 0; i < _seft.blist.length; i++) {
                    //添加顯示用標籤層
                    var label = new BMap.Label(_seft.blist[i].name, { offset: new BMap.Size(20, -10) });
                    label.hide();
                    map.addOverlay(label);

                    //添加多邊形層並顯示
                    var ply = new BMap.Polygon(_seft.blist[i].points, { strokeWeight: 5, strokeColor: "#FF0000", fillOpacity: 0.01, fillColor: " #FFFFFF" }); //建立多邊形覆蓋物
                    ply.name = _seft.blist[i].name;
                    ply.label = label;
                    ply.addEventListener("click", _seft.click);
                    ply.addEventListener("mouseover", _seft.mouseover);
                    ply.addEventListener("mouseout", _seft.mouseout);
                    ply.addEventListener("mousemove", _seft.mousemove);
                    map.addOverlay(ply);

                    //添加名稱標籤層
                    var centerlabel = new BMap.Label(_seft.blist[i].name, { offset: new BMap.Size(0, 0) });
                    centerlabel.setPosition(ply.getBounds().getCenter());
                    map.addOverlay(centerlabel);

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

                //限定顯示區域，需要引用api庫
                var boundply = new BMap.Polygon(pointArray);
                BMapLib.AreaRestriction.setBounds(map, boundply.getBounds());
                map.setViewport(pointArray);    //調整視野

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

大功告成

不懂得可以加我公衆號