当前位置： 首页 > news >正文

数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索）

news 2025/7/2 1:41:59

百度地图开发系列目录

  1. 数据可视化大屏应急管理综合指挥调度系统完整案例详解（PHP-API、Echarts、百度地图）
  2. 数据可视化大屏百度地图API开发：停车场分布标注和检索静态版
  3. 百度地图高级开发：map.getDistance计算多点之间的距离并输入矩阵
  4. 百度地图高级开发：获取某范围半径圆形区域检索覆盖物内的所有标注的解决方案
  5. 百度地图高级开发：LBS服务实时定位覆盖范围内关键词标注的解决方案
  6. 百度地图：监听地图缩放自动显示和隐藏的富文本标签
  7. 百度地图POI多信息点标注开发说明文档（php+layui+mysql+百度javascript API2.0+echarts4.8）
  8. 百度地图开发:地图调起API（Web端）使用终点经纬度直接调用百度地图导航信息的解决方案
  9. 百度地图开发自定义信息窗口openInfoWindow样式的解决方案
  10. 百度地图开发mapStyle个性化地图styleJson的配色解决方案
  11. 百度地图标注maker图标按照分类显示不同的样式
  12. 百度地图开发:地图覆盖物实现纵横交错的交通网络

文章目录

  • 百度地图开发系列目录
  • 前言
  • 一、百度地图开发准备
    • 1.引入jsAPI文件
    • 2.创建地图容器
  • 二、核心代码
    • 1.创建地图实例
    • 2.配置地图控件
    • 3.绘制行政区域
    • 4.信息弹窗
    • 5.标注数据格式
    • 6.个性化的地图
    • 百度坐标系转腾讯坐标
    • 7.地图调起
    • 8.判断浏览器类型

前言

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。

  • 创建地图
    展示地图、添加控件、个性化地图
  • 在地图上绘制
    标注、自定义标注、信息窗口、叠加图层、自定义叠加层
  • 事件
    事件处理

在这里插入图片描述

一、百度地图开发准备

1.引入jsAPI文件

   <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=***"></script>

2.创建地图容器

 <div id="container"></div>

二、核心代码

1.创建地图实例

        var map = new BMap.Map("container");var point = new BMap.Point(118.0445, 36.6115);map.centerAndZoom(point, 10);

2.配置地图控件

        map.addControl(new BMap.NavigationControl(opts));//addControl()向地图添加控件 平移和缩放控件 PC端默认左上角 移动端默认右下角且只有缩放功能map.addControl(new BMap.ScaleControl(opts));//比例尺控件 默认左下角map.addControl(new BMap.OverviewMapControl(opts));//缩略图控件 默认右下角且呈可折叠状态（点击隐藏和显示）//map.addControl(new BMap.MapTypeControl());//地图类型控件 默认右上角可切换地图/卫星/三维三种状态map.addControl(new BMap.GeolocationControl(opts));//定位控件 默认左下角

3.绘制行政区域

在这里插入图片描述

     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: "#009E56",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",//04121bstrokeWeight: 0.00001,fillColor: "#b9deff",//04121bfillOpacity: 0.3,enableMassClear: false}); //建立多边形覆盖物plyall.Type = "Border";map.addOverlay(plyall);}

4.信息弹窗

在这里插入图片描述

 function GetJGContent(data) {var str = "";if (data.video_url != null && data.video_url != undefined && data.video_url != "") {str += "<div class=\"video-box\"><video controls><source src=\"" + data.video_url + "\" type=\"video/mp4\"></video></div>";str += "机构性质：" + data.xingzhi + "<br />";str += "机构类型：" + data.leixing + "<br />";str += "服务范围：" + data.fanwei + "<br />";str += "机构住所：" + data.zhusuo + "<br />";str += "建筑面积：" + data.mianji + "<br />";str += "负&nbsp;&nbsp;责&nbsp;人：" + data.fuzeren + "<br />";if (browserRedirect()) {//手机端//str += "联系电话：<a href='tel:" + data.dianhua + "' class='dianhua'>" + data.dianhua + "</a><br />";str += "<a href='tel:" + data.dianhua + "' class='dianhua'>联系电话：" + data.dianhua + "<img src='assets/images/tel-2.png'/></a>";} else {str += "联系电话：" + data.dianhua + "<br />";}str += "收托规模：" + data.guimo + "<br />";str += "备案时间：" + data.beianshijian + "<br />"; if (browserRedirect()) {//手机端str += "<div class=\"daohang\" οnclick=\"ShowDaoHang(" + data.longitude + "," + data.latitude + ",'" + data.jigou + "');\"><img src='./assets/images/daohang.png' /></div >";}return str;}

5.标注数据格式

如果数据量不大，且非API对接引入的数据，建议直接调用外部文件；同时增加对应的版本号，便于及时更新数据。其中t=20230210190214030，为一个动态参数，保证无缓存。

<script src="js/points.js?t=20230210190214030"></script>

var mapPoints = [{id : '3078',baidu_diqu : '博山区',diqu : '博山区',jigou : '淄博芮宁托育有限公司',xingzhi : '营利',leixing : '民办',fanwei : '全日托',zhusuo : '山东省淄博市博山区山头街道山头路与河南路交叉路口北50米',mianji : '2014平方米',fuzeren : '范美荣',dianhua : '18806435258',guimo : '100人',beianshijian : '2022-08-18',is_lock : '0',add_time : '2022/9/14 15:12:11',admin_id : '1',longitude : '117.880817',latitude : '36.476661',video_url : '/attachment/202209/14/202209141508568892.mp4',shortname : '芮宁托育'},{id : '3077',baidu_diqu : '沂源县',diqu : '沂源县',jigou : '沂源县佳音托育服务有限公司',xingzhi : '营利',leixing : '民办',fanwei : '全日托，半日托，计时托，临时托',zhusuo : '北京银座星河蓝湾幼儿园',mianji : '1900平方米',fuzeren : '刘霞',dianhua : '13608943430',guimo : '200人',beianshijian : '2022-08-15',is_lock : '0',add_time : '2022/9/14 14:59:47',admin_id : '1',longitude : '118.175438',latitude : '36.181526',video_url : '/attachment/202209/14/202209141459237082.mp4',shortname : '佳音托育'}]

6.个性化的地图

1.引入外部文件，<script src="js/mapstyleJson.js"></script>，以便减少当前文件的体积。具体内容如下：

     map.setMapStyle({styleJson: styleJson});

var styleJson = [{"featureType": "land","elementType": "geometry","stylers": {"color": "#fffff9ff"}
}, {"featureType": "water","elementType": "geometry","stylers": {"color": "#69b0acff"}
}, {"featureType": "highway","elementType": "geometry.fill","stylers": {"color": "#b5caa0ff"}
}, {"featureType": "highway","elementType": "geometry.stroke","stylers": {"color": "#94ad79ff"}
}, {"featureType": "nationalway","elementType": "geometry.fill","stylers": {"color": "#b5caa0ff"}
}, {"featureType": "arterial","elementType": "geometry.fill","stylers": {"color": "#d4e2c6ff"}
}, {"featureType": "cityhighway","elementType": "geometry.fill","stylers": {"color": "#d4e2c6ff"}
}, {"featureType": "provincialway","elementType": "geometry.fill","stylers": {"color": "#d4e2c6ff"}
}, {"featureType": "provincialway","elementType": "geometry.stroke","stylers": {"color": "#b5caa0ff"}
}, {"featureType": "tertiaryway","elementType": "geometry.fill","stylers": {"color": "#ffffffff"}
}, {"featureType": "tertiaryway","elementType": "geometry.stroke","stylers": {"color": "#b5caa0ff"}
}, {"featureType": "fourlevelway","elementType": "geometry.fill","stylers": {"color": "#ffffffff"}
}, {"featureType": "fourlevelway","elementType": "geometry.stroke","stylers": {"color": "#b5caa0ff"}
}, {"featureType": "subway","elementType": "geometry","stylers": {"visibility": "off"}
}, {"featureType": "railway","elementType": "geometry","stylers": {"visibility": "off"}
}, {"featureType": "highwaysign","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "highwaysign","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "nationalwaysign","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "nationalwaysign","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "provincialwaysign","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "provincialwaysign","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "tertiarywaysign","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "tertiarywaysign","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "subwaylabel","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "subwaylabel","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "nationalway","elementType": "geometry.stroke","stylers": {"color": "#94ad79ff"}
}, {"featureType": "cityhighway","elementType": "geometry.stroke","stylers": {"color": "#b5caa0ff"}
}, {"featureType": "arterial","elementType": "geometry.stroke","stylers": {"color": "#b5caa0ff"}
}, {"featureType": "highway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "6"}
}, {"featureType": "highway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "7"}
}, {"featureType": "highway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "8"}
}, {"featureType": "highway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "9"}
}, {"featureType": "highway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "6"}
}, {"featureType": "highway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "7"}
}, {"featureType": "highway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "8"}
}, {"featureType": "highway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "9"}
}, {"featureType": "highway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "6"}
}, {"featureType": "highway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "7"}
}, {"featureType": "highway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "8"}
}, {"featureType": "highway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "9"}
}, {"featureType": "nationalway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "6"}
}, {"featureType": "nationalway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "7"}
}, {"featureType": "nationalway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "8"}
}, {"featureType": "nationalway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "9"}
}, {"featureType": "nationalway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "6"}
}, {"featureType": "nationalway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "7"}
}, {"featureType": "nationalway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "8"}
}, {"featureType": "nationalway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "9"}
}, {"featureType": "nationalway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "6"}
}, {"featureType": "nationalway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "7"}
}, {"featureType": "nationalway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "8"}
}, {"featureType": "nationalway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "9"}
}, {"featureType": "provincialway","stylers": {"curZoomRegionId": "0","curZoomRegion": "8,9","level": "8"}
}, {"featureType": "provincialway","stylers": {"curZoomRegionId": "0","curZoomRegion": "8,9","level": "9"}
}, {"featureType": "provincialway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "8,9","level": "8"}
}, {"featureType": "provincialway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "8,9","level": "9"}
}, {"featureType": "provincialway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "8,9","level": "8"}
}, {"featureType": "provincialway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "8,9","level": "9"}
}, {"featureType": "cityhighway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "6"}
}, {"featureType": "cityhighway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "7"}
}, {"featureType": "cityhighway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "8"}
}, {"featureType": "cityhighway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,9","level": "9"}
}, {"featureType": "cityhighway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "6"}
}, {"featureType": "cityhighway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "7"}
}, {"featureType": "cityhighway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "8"}
}, {"featureType": "cityhighway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "9"}
}, {"featureType": "cityhighway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "6"}
}, {"featureType": "cityhighway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "7"}
}, {"featureType": "cityhighway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "8"}
}, {"featureType": "cityhighway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,9","level": "9"}
}, {"featureType": "entertainment","elementType": "geometry","stylers": {"color": "#e4f0d7ff"}
}, {"featureType": "manmade","elementType": "geometry","stylers": {"color": "#effcf0ff"}
}, {"featureType": "education","elementType": "geometry","stylers": {"color": "#e3f7e4ff"}
}, {"featureType": "building","elementType": "geometry.stroke","stylers": {"color": "#a1cfa4ff"}
}, {"featureType": "poilabel","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "poilabel","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "education","elementType": "labels.text.fill","stylers": {"color": "#7a7a7aff"}
}, {"featureType": "education","elementType": "labels.text.stroke","stylers": {"color": "#ffffffff"}
}, {"featureType": "education","elementType": "labels.text","stylers": {"fontsize": 26}
}, {"featureType": "manmade","elementType": "labels.text.fill","stylers": {"color": "#afafafff"}
}, {"featureType": "manmade","elementType": "labels.text","stylers": {"fontsize": 26}
}, {"featureType": "scenicspotslabel","elementType": "labels.text.fill","stylers": {"color": "#376b6dff"}
}, {"featureType": "scenicspots","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "scenicspotslabel","elementType": "labels","stylers": {"visibility": "on"}
}, {"featureType": "scenicspotslabel","elementType": "labels.text.stroke","stylers": {"color": "#ffffffff","weight": 4}
}, {"featureType": "country","elementType": "labels.text.fill","stylers": {"color": "#376b6dff"}
}, {"featureType": "country","elementType": "labels.text.stroke","stylers": {"color": "#ffffffff","weight": 3}
}, {"featureType": "water","elementType": "labels.text.fill","stylers": {"color": "#ffffffff"}
}, {"featureType": "water","elementType": "labels.text.stroke","stylers": {"color": "#ffffff00"}
}, {"featureType": "water","elementType": "labels.text","stylers": {"fontsize": 24}
}];

百度坐标系转腾讯坐标

       // 百度坐标系转腾讯坐标function bMapToQQMap(lng, lat, address) {let x_pi = (3.14159265358979324 * 3000.0) / 180.0;let x = lng - 0.0065;let y = lat - 0.006;let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);let lngs = z * Math.cos(theta);let lats = z * Math.sin(theta);return [lngs, lats]}

7.地图调起

        function ShowDaoHang(lng, lat, address) {var a = bMapToQQMap(lng, lat);location.href = "http://test.com/location.php?lng=" + a[0] + "&lat=" + a[1] + "&address=" + address;}

8.判断浏览器类型

        function browserRedirect() {var sUserAgent = navigator.userAgent.toLowerCase();var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";var bIsMidp = sUserAgent.match(/midp/i) == "midp";var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";var bIsAndroid = sUserAgent.match(/android/i) == "android";var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {return true;} else {return false;}}

@漏刻有时

http://www.lryc.cn/news/1493.html

相关文章：

  • 1.面向对象和类的关系？2.什么是Promise、3.Promise和async、await的关系
  • 【程序化天空盒】过程记录01：日月 天空渐变 大气散射
  • 无线通信中的轨道角动量
  • 以后更新功能，再也不用App发版了！智能小程序将为开发者最大化减负
  • C++之类模板全特化和偏特化
  • Python 手写数字识别 MNIST数据集下载失败
  • 华为机试题：HJ61 放苹果（python）
  • 【论文速递】ICCV2021 - 基于超相关压缩实现实时高精度的小样本语义分割
  • 单例模式（Singleton Pattern）
  • docker file和compose
  • 如何解决thinkphp验证码不能显示问题？
  • Vue极简使用
  • 【Nacos】Nacos配置中心服务端源码分析
  • 第十五章 栅格数据重分类、栅格计算器、插值分析
  • CS5260测试版|CS5260demoboard|typec转VGA参考PCB原理图
  • winform开发心得
  • 学习周报-2023-0210
  • 百度富文本UE的问题集合
  • 在Linux上安装node-v14.17.3和npm-6.14.13
  • 机器学习框架sklearn之特征降维
  • java实现二叉树（一文带你详细了解二叉树的）
  • 学弟学妹少走弯路，超完整算法刷题路线出炉
  • Windows截取gif动态图的软件 ScreenToGif 的安装、使用教程
  • C++程序设计——多态：虚函数、抽象类、虚函数表
  • OpenMMLab AI实战营 第6课 语义分割与MMSegmentation
  • 产业互联网是对互联网的衍生和进化，也是一次重塑和再造
  • Shell脚本之——Hadoop3单机版安装
  • 代码随想录NO39 |0-1背包问题理论基础 416.分割等和子集
  • FITC-PEG-FA，荧光素-聚乙二醇-叶酸，FA-PEG-FITC，实验室科研试剂，提供质量检测
  • 简洁易懂：源码+实战讲解Redisson并发锁及看门狗自动续期