关键词：
百度地图开发系列目录
- 数据可视化大屏应急管理综合指挥调度系统完整案例详解（PHP-API、Echarts、百度地图）
- 数据可视化大屏百度地图API开发：停车场分布标注和检索静态版
- 百度地图高级开发：map.getDistance计算多点之间的距离并输入矩阵
- 百度地图高级开发：获取某范围半径圆形区域检索覆盖物内的所有标注的解决方案
- 百度地图高级开发：LBS服务实时定位覆盖范围内关键词标注的解决方案
- 百度地图：监听地图缩放自动显示和隐藏的富文本标签
- 百度地图POI多信息点标注开发说明文档（php+layui+mysql+百度javascript API2.0+echarts4.8）
- 百度地图开发:地图调起API（Web端）使用终点经纬度直接调用百度地图导航信息的解决方案
- 百度地图开发自定义信息窗口openInfoWindow样式的解决方案
- 百度地图开发mapStyle个性化地图styleJson的配色解决方案
- 百度地图标注maker图标按照分类显示不同的样式
- 百度地图开发:地图覆盖物实现纵横交错的交通网络
文章目录
前言
百度地图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",//04121b
strokeWeight: 0.00001,
fillColor: "#b9deff",//04121b
fillOpacity: 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 += "负 责 人：" + 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",
<r语言ggplot2可视化时间序列数据并突出标注重要时间点数据实战：特殊节点标签标注特殊区域标注
R语言ggplot2可视化时间序列数据并突出标注重要时间点数据实战：特殊节点标签标注、特殊区域标注 目录 查看详情
百度地图标注及结合echarts图谱数据可视化(代码片段)
本示例中根据企业位置经纬度，在页面右侧百度地图中标注企业名称。同时页面左侧ECharts图谱饼状图用于统计企业行业与注册资本。当右侧百度地图缩放拖拽，左侧ECharts图谱根据右侧地图上出现的企业动态变化。详细过程如下... 查看详情
可视化应用实战案例：绘制交互式+pdf+png等多格式桑基图
写在前面桑基图挺好看的，用于观察不同门类之间的从属关系，并且绘制很漂亮的结构图，当然可以用于很多个地方。这里我们用微生物组数据的phyloseq对象，很快很方便的为大家构建一个桑基图。所以如果你有phyloseq对象直接... 查看详情
百度地图行政区绘制
...便研究了一下，简单的写了demo记录一下。1.首先获取每个行政区域的边界坐标值，可能会有很多。使用以下方法：最后的json数据文件传不了，贴上又太多。需要的话也可以私发，或者通过上面方法一个区一个区自己获取；2.获取... 查看详情
如何从数据库中读出经纬度，然后在地图上进行标注
...功能。16.支持出图带标注功能。17.支持打印出图。18.支持行政区域边界及谷歌地球kml文件导入。参考技术A如何从数据库中读出经纬度，然后在地图上进行标注这个你要怎么实现啊,如果是用软件实现,还有点思路如果自己写程序的... 查看详情
送你几款数据可视化大屏项目，科技感爆棚！！
...时了解来源：blog.csdn.net/hwhsong/article/details/80805511数据可视化：把相对复杂的、抽象的数据通过可视的、交互的方式进行展示，从而形象直观地表达数据蕴含的信息和规律。数据可视化是数据空间到图形空间的映射ÿ... 查看详情
送你几款数据可视化大屏项目，科技感爆棚！！
...时了解来源：blog.csdn.net/hwhsong/article/details/80805511数据可视化：把相对复杂的、抽象的数据通过可视的、交互的方式进行展示，从而形象直观地表达数据蕴含的信息和规律。数据可视化是数据空间到图形空间的映射ÿ... 查看详情
可视化应用实战案例：metacoder-相关进化树图的绘制(代码片段)
metacoder包学习安装和导入R包#--选择安装cran或者github中的R包#if(!require(metacoder))install.packages("metacoder")#if(!require(metacoder))devtools::install_github("grunwaldlab/metacoder")#--导入R包，开始学习library(metacoder)#---构造自己的数据library(ggClusterNet)libr... 查看详情
用python绘制百度风格地图(代码片段)
...三连）不过做为号称万金油的Python，拥有强大的可视化能力，这是毋庸置疑的，而地图做为可视化的巅峰，能在地图上绘制出什么效果，大部分人都心里没底的。平时如果直接用Python对地图进行可视化... 查看详情
用python绘制百度风格地图(代码片段)
...三连）不过做为号称万金油的Python，拥有强大的可视化能力，这是毋庸置疑的，而地图做为可视化的巅峰，能在地图上绘制出什么效果，大部分人都心里没底的。平时如果直接用Python对地图进行可视化... 查看详情
获取街道镇级的地图geojson数据方法，使用echarts绘制出街道镇级的地图区域画面（中山市为例）(代码片段)
...种方法（不可获取街道、镇级数据）阿里云数据可视化平台http://datav.aliyun.com/portal/school/atlas/area_selector可以直接获取全国、各省、各市以及个县级市详细地图信息的geoJson数据注意：目前平台还拿不到街道、镇的区域... 查看详情
真屏实据丨数据大屏设计实战—揭秘企业级数据大屏设计过程
...文来自网易云社区作者： 魏辛逸图片：“网易有数”可视化平台大屏是我们用来分享、沟通、传播信息的有效途径之一。它将会进化成一种新的媒体形式，在品牌推广、政务接待、商业沟通、数据监控等各个场景发挥重要作... 查看详情
20个酷炫的可视化大屏模板来了，各行业数据直接套用
最近经常有不少小伙伴问我：有没有数据可视化大屏模板，而且希望简单、好上手。今天我特地给大家准备了20张精美、炫酷而且十分实用的可视化大屏模板，涉及机械、加工、零售、银行、交通等行业。只要你有数... 查看详情
开源datav组件中环形图的使用案例-数据可视化大屏(代码片段)
效果图->datav组件使用demo<template><divclass="center-cmp"><dv-active-ring-chartclass="ccmc-middle":config="config"/></div></template><s 查看详情
pyechartsgeo绘制可视化地图并展示坐标位置(代码片段)
文章目录PyechartsGeo绘制可视化地图安装需要的模块绘制出地图生成空白地图修改参数，调整地图输出格式地图上展示坐标位置输入坐标点将坐标点添加入系列并配置系列完整代码参考文献PyechartsGeo绘制可视化地图安装需要的模块... 查看详情
两个大屏可视化案例的布局与实现
...期分别使用了 React 和 Vue 完成了两个大屏可视化案例，经历了设计师和产品经理的各种 “指指点点” ，也算是对可视化大屏项目有了一点点小的经验，对于两个技术栈写组件也有一点小心得，趁着... 查看详情
地图可视化：geopandas绘制拓扑着色地图(代码片段)
❝本文示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes❞1简介我们在绘制某些地图时，为了凸显出每个独立的区域，需要满足拓扑着色要求，即所有相邻的区域不可以用同一种颜色绘制&#x... 查看详情
基于echarts实现可视化数据大屏大数据可视化(代码片段)
前言🚀基于Echarts实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作，可以在此基础上重新开发。本项目中使用的是echarts图表库，ECharts提供了常规的折线图、柱状图、散点图、... 查看详情