vue实现地图只显示几个省份

最新推荐文章于 2024-11-29 01:30:46 发布

原创最新推荐文章于 2024-11-29 01:30:46 发布 · 3.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#百度地图 #显示中国省份

前端同时被 3 个专栏收录

6 篇文章

订阅专栏

MAp

2 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

本文介绍如何使用百度地图API，通过JavaScript和Vue.js，仅显示选定的省份如甘肃省和陕西省，实现地图的区域限制功能。

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

一、开场白

今天给大家说一说百度地图如何只显示一个省份，或者几个省份，再说大点就是那个国家。

二、操作

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);
            }

大功告成

不懂得可以加我公众号