百度地图添加多边形

原创 已于 2022-10-12 16:05:57 修改 · 838 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

于 2022-09-22 16:37:03 首次发布
本文介绍如何使用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)

xingyunwei1
关注
百度地图API画多边型，测面积
Java_c#
08-08 4583
效果：   脚本： 耕地分布图 html,body { height:100%; margin:0; } var map = new BMap.Map("container", { mapType: BMAP_HYBRID_MAP }); //设置卫星图为底图 map.cent
百度地图绘制多边形
12-04
百度地图绘制多边形,显示位置等
百度地图 图层 多边形
10-16
百度地图 点线面 图层
vue3引入百度地图绘制多边形
最新发布
zslsh44的专栏
04-16 491
vue3引入百度地图绘制多边形，可判断点是否在多边形内。
百度地图的使用 绘制多边形 编辑多边形
gqj199928的博客
08-12 3256
百度地图绘制多边形 编辑修改多边形
百度地图添加点、多边形、圆
frank_hehe的博客
07-30 2009
最近抽空看了一下百度地图的覆盖物API，特此记录一下，后续会继续学习地图其他的操作，也会记录… <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" c...
百度地图多边形编辑功能
左右点击改变月份功能
08-01 2296
百度地图多边形编辑功能 此功能包括根据回台的返回点回显在地图上编辑，删除，下面直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>地图显示</title> <style type="text/css"> body,...
百度地图绘制多边形几何图形并保存坐标转成覆盖物
04-12
本话题聚焦于如何使用百度地图API来绘制多边形几何图形，并将这些图形的坐标保存，以便后续转化为地图上的覆盖物。下面将详细阐述这一过程。 首先，我们要了解百度地图API的核心功能。百度地图API提供了丰富的地图...
百度地图无限个多边形覆盖物实例代码
11-18
同时本代码实例补充了百度地图API功能，实现在多边形覆盖物中心点显示覆盖区域名称的功能，同时改变覆盖物形状，名称位置会自动更新于覆盖物的中心。点击名称还可弹出名称编辑对话框，实现更新覆盖区域名称的目的，...
Android百度地图多边形围栏Demo
05-08
此Demo是基于百度地图V4_5_2版本的,多边形电子围栏Demo, 完美实现了以下功能 1.手动点击地图,会自动添加Marker 2.多于两个点,会自动划线 3.多于三个点会自动画出多边形区域 4.长按Marker,可以删除和修改电子围栏区域...
DrawingManager.js___百度地图API
热门推荐
crazzy0727的专栏
07-03 1万+
1 /** 2 * @fileoverview 百度地图的鼠标绘制工具，对外开放。 3 * 允许用户在地图上点击完成鼠标绘制的功能。 4 * 使用者可以自定义所绘制结果的相关样式，例如线宽、颜色、测线段距离、面积等等。 5 * 主入口类是DrawingManager， 6 * 基于Baidu Map API 1.4。 7 * 8 * @author Bai
百度地图画多边形代码
轻松qinsong
05-02 677
1.百度地图上画多边形 2.java判断点是否在多边形中
百度地图api js在移动端画多边形的解决方法
07-09
百度地图api js的DrawingManager类在移动端并不能很好的做到绘制多边形，因此，作者换了个思路，使用点击画线的方式，做到多边形的绘制功能。
百度地图绘制围栏，圆形，多边形，行政区域
lotte
06-27 1651
百度地图绘制围栏，圆形，多边形，行政区域。
百度地图画多边形
阿磊的博客
07-21 1254
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/
百度地图绘制多边形区域 并获取范围坐标
Mjl_666的博客
06-24 3783
效果如图，随意绘制一个多边形，并且打印多边形每个点的坐标 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="te
百度地图离线地图实现绘制多边形及回显多边形区域
Holly31的博客
04-22 1483
鉴于部分项目特殊性，项目使用内网，在线地图无法显示，改离线地图。
百度地图api js绘制多边形使用方法
qq_41756580的博客
07-09 4567
1.引入接口 <script src="http://api.map.baidu.com/api?v=2.0&ak=你的key"></script> <script type="text/javascript" src="js/jquery.min.js" ></script> <script type="text/javascri...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值