百度地图添加多边形

xingyunwei1

已于 2022-10-12 16:05:57 修改

阅读量829

点赞数

文章标签： vue.js 前端 javascript

于 2022-09-22 16:37:03 首次发布

本文链接：https://blog.youkuaiyun.com/xingyunwei1/article/details/126994585

版权

本文介绍如何使用Vue.js集成百度地图API，包括安装Vue百度地图组件、配置密钥、自定义地图样式及显示多边形区域等步骤。

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

1.安装百度地图

npm install vue-baidu-map --save
// 或者
yarn install vue-baidu-map

2.在main.js中引用百度地图

import BMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})

//或者
到 public 文件夹下的 index.html 文件 引入
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=3.0&ak=申请的key"></script>

3.修改地图样式

// 自定义主题
map.setMapStyle({
  styleJson: [
    {
      featureType: "water",
      elementType: "all",
      stylers: {
        color: "#102d68",
      },
    },
    {
      featureType: "land",
      elementType: "all",
      stylers: {
        color: "#091934",
      },
    },
    {
      featureType: "boundary",
      elementType: "geometry",
      stylers: {
        color: "#064f85",
      },
    },
    {
      featureType: "railway",
      elementType: "all",
      stylers: {
        visibility: "off",
      },
    },
    {
      featureType: "highway",
      elementType: "geometry",
      stylers: {
        color: "#004981",
      },
    },
    {
      featureType: "highway",
      elementType: "geometry.fill",
      stylers: {
        color: "#005b96",
        lightness: 1,
      },
    },
    {
      featureType: "highway",
      elementType: "labels",
      stylers: {
        visibility: "on",
      },
    },
    {
      featureType: "arterial",
      elementType: "geometry",
      stylers: {
        color: "#004981",
        lightness: -39,
      },
    },
    {
      featureType: "arterial",
      elementType: "geometry.fill",
      stylers: {
        color: "#00508b",
      },
    },
    {
      featureType: "poi",
      elementType: "all",
      stylers: {
        visibility: "off",
      },
    },
    {
      featureType: "green",
      elementType: "all",
      stylers: {
        color: "#102f6d",
        visibility: "off",
      },
    },
    {
      featureType: "subway",
      elementType: "all",
      stylers: {
        visibility: "off",
      },
    },
    {
      featureType: "manmade",
      elementType: "all",
      stylers: {
        visibility: "off",
      },
    },
    {
      featureType: "local",
      elementType: "all",
      stylers: {
        visibility: "off",
      },
    },
    {
      featureType: "arterial",
      elementType: "labels",
      stylers: {
        visibility: "off",
      },
    },
    {
      featureType: "boundary",
      elementType: "geometry.fill",
      stylers: {
        color: "#029fd4",
      },
    },
    {
      featureType: "building",
      elementType: "all",
      stylers: {
        color: "#1a5787",
      },
    },
    {
      featureType: "label",
      elementType: "all",
      stylers: {
        color: "#0e9cd2",
        "font-weight": "bold",
        visibility: "on",
      },
    },
    {
      featureType: "administrative", // 村名
      elementType: "labels",
      stylers: {
        visibility: "on",
      },
    },
    {
      featureType: "administrative",
      elementType: "labels.text.stroke",
      stylers: {
        color: "#0e9cd200",
        weight: 0,
      },
    },
    {
      featureType: "road", // 路名
      elementType: "labels",
      stylers: {
        visibility: "off",
      },
    },
  ],
});

效果图：

4.页面引入

 <!--地图-->
<div id="map" style="height: 100%; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out"></div>

5.在mounted生命周期中写逻辑


var map = new BMap.Map('map'); // 创建Map实例
map.centerAndZoom(new BMap.Point(115.49166389782876, 38.78076109500626), 15); // 初始化地图,设置中心点坐标和地图级别
 map.setMapStyle({
//地图样式
               styleJson: [
                    {
                        featureType: 'water',
                        elementType: 'all',
                        stylers: {
                            color: '#102d68'
                        }
                    },
                    {
                        featureType: 'land',
                        elementType: 'all',
                        stylers: {
                            color: '#091934'
                        }
                    },
                    {
                        featureType: 'boundary',
                        elementType: 'geometry',
                        stylers: {
                            color: '#064f85'
                        }
                    },
                    {
                        featureType: 'railway',
                        elementType: 'all',
                        stylers: {
                            visibility: 'off'
                        }
                    },
                    {
                        featureType: 'highway',
                        elementType: 'geometry',
                        stylers: {
                            color: '#004981'
                        }
                    },
                    {
                        featureType: 'highway',
                        elementType: 'geometry.fill',
                        stylers: {
                            color: '#005b96',
                            lightness: 1
                        }
                    },
                    {
                        featureType: 'highway',
                        elementType: 'labels',
                        stylers: {
                            visibility: 'none'
                        }
                    },
                    {
                        featureType: 'arterial',
                        elementType: 'geometry',
                        stylers: {
                            color: '#004981',
                            lightness: -39
                        }
                    },
                    {
                        featureType: 'arterial',
                        elementType: 'geometry.fill',
                        stylers: {
                            color: '#00508b'
                        }
                    },
                    {
                        featureType: 'poi',
                        elementType: 'all',
                        stylers: {
                            visibility: 'off'
                        }
                    },
                    {
                        featureType: 'green',
                        elementType: 'all',
                        stylers: {
                            color: '#102f6d',
                            visibility: 'off'
                        }
                    },
                    {
                        featureType: 'subway',
                        elementType: 'all',
                        stylers: {
                            visibility: 'off'
                        }
                    },
                    {
                        featureType: 'manmade',
                        elementType: 'all',
                        stylers: {
                            visibility: 'off'
                        }
                    },
                    {
                        featureType: 'local',
                        elementType: 'all',
                        stylers: {
                            visibility: 'off'
                        }
                    },
                    {
                        featureType: 'arterial',
                        elementType: 'labels',
                        stylers: {
                            visibility: 'off'
                        }
                    },
                    {
                        featureType: 'boundary',
                        elementType: 'geometry.fill',
                        stylers: {
                            color: '#029fd4'
                        }
                    },

                    {
                        featureType: 'building',
                        elementType: 'all',
                        stylers: {
                            color: '#1a5787'
                        }
                    },
                    {
                        featureType: 'label',
                        elementType: 'all',
                        stylers: {
                            color: '#0e9cd2',
                            'font-weight': 'bold',
                            visibility: 'none'
                        }
                    },
                    {
                        featureType: 'administrative', // 村名
                        elementType: 'labels',
                        stylers: {
                            visibility: 'none'
                        }
                    },
                    {
                        featureType: 'administrative',
                        elementType: 'labels.text.stroke',
                        stylers: {
                            color: '#0e9cd200',
                            weight: 0
                        }
                    },
                    {
                        featureType: 'road', // 路名
                        elementType: 'labels',
                        stylers: {
                            visibility: 'none'
                        }
                    },
                    {
                        featureType: 'road',
                        elementType: 'labels.text.stroke',
                        stylers: {
                            color: '#cccccccc',
                            weight: 0
                        }
                    }
                ]
            });
var list = [
        {
            'points':[
                {
                    'lng':'116.387112',
                    'lat':'39.920977'
                },
                 {
                    'lng': '117.385243',
                    'lat': '40.073449'
                },
                 {
                    'lng': '117.385243',
                    'lat': '39.073449'
                },
                 {
                    'lng': '116.387112',
                     'lat': '39.920977'
                }
            ]
        },
        {
            'points': [
                {
                    'lng': '116.342868',
                    'lat': '40.07897'
                },
                {
                    'lng': '118.344659',
                    'lat': '40.073449'
                },
                {
                    'lng': '119.351558',
                    'lat': '39.077369'
                },
                {
                    'lng': '116.342868',
                    'lat': '40.07897'
                }
            ]
        },
    ]
    // 百度地图API功能
    var styleOptions = {
        strokeColor: "red",    //边线颜色。
        fillColor: "red",      //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 3,       //边线的宽度，以像素为单位。
        strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
        fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
        strokeStyle: 'solid' //边线的样式，solid或dashed。
    }
    function showPolygon(points) {
        for (var i = 0, listLen = points.length; i < listLen; i++) {
            var listArr = points[i]
            var point = []
            for(var j = 0, pointsLen = listArr.points.length; j < pointsLen; j++){
              point[j] = new BMap.Point(listArr.points[j].lng, listArr.points[j].lat)
            }
            var polygon = new BMap.Polygon(point, styleOptions);  //创建多边形
            map.addOverlay(polygon); 
        }
    }

    var map = new BMap.Map("map"); // 创建Map实例
    map.enableScrollWheelZoom();
    map.centerAndZoom(new BMap.Point(116.342868, 40.07897), 10);
    showPolygon(list)