hewusheng10

【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注

摘要：如果你自己的数据已经超过1万个，如何进行合理的显示？除了聚合marker外，还有一个办法。那就是，只显示可视区域内的标注。

--------------------------------------------------------------------------------------------------------------

成品图：

工具描述：

移动地图时（或改变地图级别时），只显示可视区域内的标注。非可视区域内的标注都移除。

这样可以保持高效的系统性能。

另外，可视区域内的标注，请保持在200以内。各类浏览器方能高效地显示。

如果有超过300个marker，建议使用聚合marker类，请参考LIB：http://dev.baidu.com/wiki/map/index.php?title=MapLibrary

1、从数据库里读取信息

数据库里需要存储的信息至少为：经纬度point，标注图片icon。

读取后，创建点、标注。（注意：只是创建标注，并不添加到地图上。）

//创建10个点
var p1 = new BMap.Point(116.387452,39.947302);
var p2 = new BMap.Point(116.361581,39.961129);
var p3 = new BMap.Point(116.437901,39.960133);
var p4 = new BMap.Point(116.459748,39.919528);
var p5 = new BMap.Point(116.424247,39.939557);
var p6 = new BMap.Point(116.485188,39.974511);
var p7 = new BMap.Point(116.485188,39.974511);
var p8 = new BMap.Point(116.494243,39.930484);
var p9 = new BMap.Point(116.45328,39.884103);
var p0 = new BMap.Point(116.456011,39.844671);

//创建10张图标
var icon1 = new BMap.Icon("img/1.jpg", new BMap.Size(50,50));
var icon2 = new BMap.Icon("img/2.jpg", new BMap.Size(50,50));
var icon3 = new BMap.Icon("img/3.jpg", new BMap.Size(50,50));
var icon4 = new BMap.Icon("img/4.jpg", new BMap.Size(50,50));
var icon5 = new BMap.Icon("img/5.jpg", new BMap.Size(50,50));
var icon6 = new BMap.Icon("img/6.jpg", new BMap.Size(50,50));
var icon7 = new BMap.Icon("img/7.jpg", new BMap.Size(50,50));
var icon8 = new BMap.Icon("img/8.jpg", new BMap.Size(50,50));
var icon9 = new BMap.Icon("img/9.jpg", new BMap.Size(50,50));
var icon0 = new BMap.Icon("img/0.jpg", new BMap.Size(50,50));

//创建10个marker，但不添加到地图上
var m1 = new BMap.Marker(p1,{icon:icon1}); 
var m2 = new BMap.Marker(p2,{icon:icon2}); 
var m3 = new BMap.Marker(p3,{icon:icon3}); 
var m4 = new BMap.Marker(p4,{icon:icon4}); 
var m5 = new BMap.Marker(p5,{icon:icon5}); 
var m6 = new BMap.Marker(p6,{icon:icon6}); 
var m7 = new BMap.Marker(p7,{icon:icon7}); 
var m8 = new BMap.Marker(p8,{icon:icon8}); 
var m9 = new BMap.Marker(p9,{icon:icon9}); 
var m0 = new BMap.Marker(p0,{icon:icon0});

为了方便运算，用一个数组将标注集合起来：

//建立一个marker的数组
var markers = [m1,m2,m3,m4,m5,m6,m7,m8,m9,m0,m11,m12,m13,m14,m15,m16,m17,m18,m19,m10,m21,m22,m23,m24,m25,m26,m27,m28,m29,m20];

2、判断标注是否在可视区域内

利用几何运算的LIB可以轻松判断，标注是否在可视区域内。

几何运算LIB：http://dev.baidu.com/wiki/map/index.php?title=MapLibrary

判断标注如果在可视区域内，则添加到地图上；如果标注不在可视区域内，则删除它。

判断代码：

//显示可视区域内的标注
function addMymarkers(){
    for(i=0;i<markers.length;i++){
        var result = BMapLib.GeoUtils.isPointInRect(markers[i].point, map.getBounds());
        if(result == true) map.addOverlay(markers[i]);
        else map.removeOverlay(markers[i]);
    }
}

3、将可视区域内的标注添加到地图上

在图块加载完毕，地图中心点改变，和地图级别改变时，都需要进行一次添加/移除标注的操作。

//对地图级别变化、移动结束和图块加载完毕后，进行添加marker的操作
map.addEventListener("tilesloaded", addMymarkers);
map.addEventListener("zoomend", addMymarkers);
map.addEventListener("moveend", addMymarkers);

4、给标注的区域画一个框

为了方便观看，我用的是折线覆盖物，你也可以使用多边形覆盖物。

//添加一个矩形覆盖物
var polyline = new BMap.Polyline([
  new BMap.Point(116.279655,40.020499),
  new BMap.Point(116.260683,39.833259),
  new BMap.Point(116.532043,39.830599),
  new BMap.Point(116.526869,40.021383),
  new BMap.Point(116.279655,40.020499)
], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
map.addOverlay(polyline);

本例全部源代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>社交地图</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
<div style="width:200px;height:340px;border:1px solid gray" id="info"></div>
<p id="info"></p>
</body>
</html>
<script type="text/javascript">
//创建地图
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.387452,39.947302), 13);

//添加一个矩形覆盖物
var polyline = new BMap.Polyline([
  new BMap.Point(116.279655,40.020499),
  new BMap.Point(116.260683,39.833259),
  new BMap.Point(116.532043,39.830599),
  new BMap.Point(116.526869,40.021383),
  new BMap.Point(116.279655,40.020499)
], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
map.addOverlay(polyline);

//显示可视区域内的标注
function addMymarkers(){
    document.getElementById("info").innerHTML = '';
    for(i=0;i<markers.length;i++){
        var result = BMapLib.GeoUtils.isPointInRect(markers[i].point, map.getBounds());
        if(result == true) map.addOverlay(markers[i]);
        else map.removeOverlay(markers[i]);
        document.getElementById("info").innerHTML += '<img src="' + markers[i].getIcon().imageUrl +'" />';        
    }
}


//对地图级别变化、移动结束和图块加载完毕后，进行添加marker的操作
map.addEventListener("tilesloaded", addMymarkers);
map.addEventListener("zoomend", addMymarkers);
map.addEventListener("moveend", addMymarkers);

//创建30个点
var p1 = new BMap.Point(116.387452,39.947302);
var p2 = new BMap.Point(116.361581,39.961129);
var p3 = new BMap.Point(116.437901,39.960133);
var p4 = new BMap.Point(116.459748,39.919528);
var p5 = new BMap.Point(116.424247,39.939557);
var p6 = new BMap.Point(116.485188,39.974511);
var p7 = new BMap.Point(116.485188,39.974511);
var p8 = new BMap.Point(116.494243,39.930484);
var p9 = new BMap.Point(116.45328,39.884103);
var p0 = new BMap.Point(116.456011,39.844671);

var p11 = new BMap.Point(116.387165,39.850654);
var p12 = new BMap.Point(116.461185,39.8975);
var p13 = new BMap.Point(116.380122,39.87458);
var p14 = new BMap.Point(116.354395,39.899825);
var p15 = new BMap.Point(116.394495,39.887093);
var p16 = new BMap.Point(116.30524,39.902482);
var p17 = new BMap.Point(116.287992,39.937676);
var p18 = new BMap.Point(116.277931,39.911116);
var p19 = new BMap.Point(116.340166,39.929267);
var p10 = new BMap.Point(116.290004,39.965885);

var p21 = new BMap.Point(116.377535,39.966548);
var p22 = new BMap.Point(116.423672,39.95239);
var p23 = new BMap.Point(116.423672,39.95239);
var p24 = new BMap.Point(116.300353,40.003146);
var p25 = new BMap.Point(116.294172,39.982251);
var p26 = new BMap.Point(116.313432,39.977497);
var p27 = new BMap.Point(116.390183,39.983357);
var p28 = new BMap.Point(116.390183,39.983357);
var p29 = new BMap.Point(116.484469,39.943872);
var p20 = new BMap.Point(116.509191,39.932586);

//创建30张图标
var icon1 = new BMap.Icon("img/1.jpg", new BMap.Size(50,50));
var icon2 = new BMap.Icon("img/2.jpg", new BMap.Size(50,50));
var icon3 = new BMap.Icon("img/3.jpg", new BMap.Size(50,50));
var icon4 = new BMap.Icon("img/4.jpg", new BMap.Size(50,50));
var icon5 = new BMap.Icon("img/5.jpg", new BMap.Size(50,50));
var icon6 = new BMap.Icon("img/6.jpg", new BMap.Size(50,50));
var icon7 = new BMap.Icon("img/7.jpg", new BMap.Size(50,50));
var icon8 = new BMap.Icon("img/8.jpg", new BMap.Size(50,50));
var icon9 = new BMap.Icon("img/9.jpg", new BMap.Size(50,50));
var icon0 = new BMap.Icon("img/0.jpg", new BMap.Size(50,50));

var icon11 = new BMap.Icon("img/11.jpg", new BMap.Size(50,50));
var icon12 = new BMap.Icon("img/12.jpg", new BMap.Size(50,50));
var icon13 = new BMap.Icon("img/13.jpg", new BMap.Size(50,50));
var icon14 = new BMap.Icon("img/14.jpg", new BMap.Size(50,50));
var icon15 = new BMap.Icon("img/15.jpg", new BMap.Size(50,50));
var icon16 = new BMap.Icon("img/16.jpg", new BMap.Size(50,50));
var icon17 = new BMap.Icon("img/17.jpg", new BMap.Size(50,50));
var icon18 = new BMap.Icon("img/18.jpg", new BMap.Size(50,50));
var icon19 = new BMap.Icon("img/19.jpg", new BMap.Size(50,50));
var icon10 = new BMap.Icon("img/10.jpg", new BMap.Size(50,50));

var icon21 = new BMap.Icon("img/21.jpg", new BMap.Size(50,50));
var icon22 = new BMap.Icon("img/22.jpg", new BMap.Size(50,50));
var icon23 = new BMap.Icon("img/23.jpg", new BMap.Size(50,50));
var icon24 = new BMap.Icon("img/24.jpg", new BMap.Size(50,50));
var icon25 = new BMap.Icon("img/25.jpg", new BMap.Size(50,50));
var icon26 = new BMap.Icon("img/26.jpg", new BMap.Size(50,50));
var icon27 = new BMap.Icon("img/27.jpg", new BMap.Size(50,50));
var icon28 = new BMap.Icon("img/28.jpg", new BMap.Size(50,50));
var icon29 = new BMap.Icon("img/29.jpg", new BMap.Size(50,50));
var icon20 = new BMap.Icon("img/20.jpg", new BMap.Size(50,50));

//创建30个marker，但不添加到地图上
var m1 = new BMap.Marker(p1,{icon:icon1}); 
var m2 = new BMap.Marker(p2,{icon:icon2}); 
var m3 = new BMap.Marker(p3,{icon:icon3}); 
var m4 = new BMap.Marker(p4,{icon:icon4}); 
var m5 = new BMap.Marker(p5,{icon:icon5}); 
var m6 = new BMap.Marker(p6,{icon:icon6}); 
var m7 = new BMap.Marker(p7,{icon:icon7}); 
var m8 = new BMap.Marker(p8,{icon:icon8}); 
var m9 = new BMap.Marker(p9,{icon:icon9}); 
var m0 = new BMap.Marker(p0,{icon:icon0}); 

var m11 = new BMap.Marker(p11,{icon:icon11}); 
var m12 = new BMap.Marker(p12,{icon:icon12}); 
var m13 = new BMap.Marker(p13,{icon:icon13}); 
var m14 = new BMap.Marker(p14,{icon:icon14}); 
var m15 = new BMap.Marker(p15,{icon:icon15}); 
var m16 = new BMap.Marker(p16,{icon:icon16}); 
var m17 = new BMap.Marker(p17,{icon:icon17}); 
var m18 = new BMap.Marker(p18,{icon:icon18}); 
var m19 = new BMap.Marker(p19,{icon:icon19}); 
var m10 = new BMap.Marker(p10,{icon:icon10}); 

var m21 = new BMap.Marker(p21,{icon:icon21}); 
var m22 = new BMap.Marker(p22,{icon:icon22}); 
var m23 = new BMap.Marker(p23,{icon:icon23}); 
var m24 = new BMap.Marker(p24,{icon:icon24}); 
var m25 = new BMap.Marker(p25,{icon:icon25}); 
var m26 = new BMap.Marker(p26,{icon:icon26}); 
var m27 = new BMap.Marker(p27,{icon:icon27}); 
var m28 = new BMap.Marker(p28,{icon:icon28}); 
var m29 = new BMap.Marker(p29,{icon:icon29}); 
var m20 = new BMap.Marker(p20,{icon:icon20}); 

//建立一个marker的数组
var markers = [m1,m2,m3,m4,m5,m6,m7,m8,m9,m0,m11,m12,m13,m14,m15,m16,m17,m18,m19,m10,m21,m22,m23,m24,m25,m26,m27,m28,m29,m20];
</script>

2012-02-07 更新代码：修改addMymarkers函数。

当可视区域内的标注大于10的时候，只显示10个标注。并在右侧显示，可视区域内共有多少用户。

部分源代码：

//显示可视区域内的标注
function addMymarkers(){
    document.getElementById("info").innerHTML = "小于10个用户";
    var j = 0;
    for(i=0;i<markers.length;i++){
        var result = BMapLib.GeoUtils.isPointInRect(markers[i].point, map.getBounds());
        if(result == true && j<10) {            
            map.addOverlay(markers[i]);
            ++j;            
        }
        else if(result == true && j>=10){
            ++j;
            document.getElementById("info").innerHTML = "可视区域内的用户数：</br><b style='color:red;font-size:50px'>" + j + "</b>";
            map.removeOverlay(markers[i]);            
        }
        else map.removeOverlay(markers[i]);       
    }
}

洛谷 P1923：【深基9.例4】求第 k 小的数 ← 快读 hnjzsyjyj 信息学竞赛 #STL标准库数据结构快读
【题目来源】https://www.luogu.com.cn/problem/P1923【题目描述】输入n（1≤n'9'){//!isdigit(c)if(c=='-')f=-1;c=getchar();}while(c>='0'&&cusingnamespacestd;constintmaxn=5e6+5;inta[maxn];intread(){//fastreadintx=0,f=1;cha
深度学习框架PyTorch——从入门到精通（5）自动微分 Fansv587 深度学习 pytorch 人工智能
使用torch.autograd自动微分张量、函数和计算图计算梯度禁用梯度追踪关于计算图的更多信息张量梯度和雅可比乘积在训练神经网络时，最常用的算法是反向传播。在该算法中，参数（模型权重）根据损失函数的梯度相对于给定参数进行调整。为了计算这些梯度，PyTorch有一个内置的微分引擎，名为torch.autograd。它支持为任何计算图自动计算梯度。考虑最简单的一层神经网络，具有输入x、参数w和b以
无线数据网关自动化测控的LoRa-4G混合网络串口升级、信号扩展高效物联传输网络河北稳控科技自动化网络运维
DLS11无线数据网关自动化测控的LoRa-4G混合网络串口升级、信号扩展高效物联传输网络DLS11是一款专为VSxxx系列采发仪设计的内置电池低功耗数据转发器，支持LoRA和LTE（4G）无线通信。该设备通过“实时在线”的LoRA收发器，能够收集并存储来自其他LoRA设备的数据。随后，DLS11会定时启动，将这些存储的数据重新打包为标准数据包，并通过LTE网络发送至远端服务器。数据发送方式灵活多
一文读懂stm32和51单片机的区别对error说不 stm32 51单片机嵌入式硬件
一、引言在嵌入式系统开发领域，STM32和51单片机是两款被广泛使用的微控制器。51单片机以其简单易学、成本低廉的特点，在早期的电子开发中占据了主导地位；而STM32作为后起之秀，凭借其高性能、丰富的外设和强大的处理能力，逐渐成为了中高端应用的首选。本文将从多个方面详细阐述STM32和51单片机的区别，并给出相应的代码示例进行对比。二、硬件架构2.1内核51单片机：采用8位的8051内核，数据处理
十年老鸟告诉你，51单片机和STM32怎么选择？单片机陈老师单片机 51单片机单片机 51单片机 stm32
十年老鸟告诉你，51单片机和STM32怎么选择？初中辍学进厂，边工作边自学单片机，各种单片机实战项目，也是零基础学的stm32，应该还是能给你一些建议。首先理解为什么叫嵌入式?单从电路板硬件上看，是将串口、以太等控制芯片集成到CPU内，或者做成模组的形式;从软件上看，就是将业务程序和操作系统一起烧录到ROM中去。嵌入式系统可以分为三个就业方向:硬件、驱动、嵌入式操作系统及其上层业务。下面详解。硬件
网络协议与安全：前端安全防护之CORS/CSP/CSRF(3) 双囍菜菜前端随记网络协议安全 csrf
前端安全三剑客：CORS、CSP、CSRF防护实战手册文章目录前端安全三剑客：CORS、CSP、CSRF防护实战手册一、当安全防线失守：某社交平台的XSS噩梦二、同源策略：Web安全的基石与枷锁2.1同源定义与限制2.2现实中的妥协方案三、CORS：跨域资源共享的守门人3.1预检请求机制3.2服务端配置示例（Nginx）3.3前端实践注意四、CSP：堵住XSS的最后防线4.1策略配置解析4.2Re
网络协议与安全：WebSocket/WebRTC(2) 双囍菜菜前端随记网络协议安全 websocket
前端实时通信双雄：WebSocket与WebRTC的生存实战指南文章目录前端实时通信双雄：WebSocket与WebRTC的生存实战指南一、当HTTP遇到实时场景：在线课堂的卡顿之痛二、WebSocket：双向通信的热线电话2.1协议握手过程解析2.2React实时聊天实现2.3Vue股票行情展示三、WebRTC：点对点直连的终极方案3.1核心架构三要素3.2视频会议实现（React版）3.3文件
ORA-12541: TNS:no listener 夜光小兔纸运维数据库 Oracle 运维 oracle 数据库
问题描述：使用PL/SQLDeveloper连接数据库时出现ORA-12541错误。1.查询监听状态[oracle@localhostadmin]$lsnrctlstatusLSNRCTLforLinux:Version19.0.0.0.0-Productionon15-MAR-202510:47:57Copyright(c)1991,2021,Oracle.Allrightsreserved.C
消融实验（Ablation Study） xwhking 深度学习机器学习深度学习消融实验
消融实验（AblationStudy）定义：消融实验是一种科学研究方法，通过逐步移除模型、算法或系统中的某个组件（如模块、层、特征、数据等），观察其对整体性能的影响，从而验证该组件的必要性和有效性。其名称来源于医学领域的“消融术”（切除部分组织以研究功能），在计算机视觉、机器学习和深度学习中被广泛用于分析模型设计。为什么要做消融实验？1.验证组件的有效性核心目的：确认模型中某个设计（如注意力机制、
51单片机数码管操作 Alaso_shuang C51单片机学习 51单片机嵌入式硬件单片机
数码管操作静态数码管显示提要点:1.51单片机上的数码管是共阴连接的,所以需要在位选的时候给定低电平(接地)选中其几号LED,而接下来的段选注意一定是从高位到低位输出哦，因为我前面定义的位选三个接口顺序是由高位到低位的！！！#includevoidmain(){P2_4=1;P2_3=0;P2_2=1;P0=0x7D;}自己写的5(共阳数码管)#includevoiddigitalTube(uns
STM 32简介 xwhking #STM32 单片机嵌入式硬件
STM32是意法半导体（STMicroelectronics）设计的一系列32位微控制器（MCU），基于ARMCortex-M内核，被广泛用于嵌入式系统和物联网设备。它之所以能“控制很多东西”，核心原因在于硬件功能强大、接口丰富，并且软件生态完善。以下是通俗易懂的解释：1.STM32是什么？本质：一块高度集成的“微型电脑芯片”，内部包含：CPU（ARMCortex-M系列）：负责运算和逻辑控制。内
苹果iPhone 16e销量表现糟糕难以拯救市场佳晓晓智能手机 scikit-learn django vue.js iphone
在竞争激烈的智能手机市场中，苹果公司一直占据着重要的地位。然而，其最新推出的iPhone16e却在市场上遭遇了滑铁卢，销量表现糟糕，难以拯救苹果在中国市场不断下降的市场份额。本文将从多个方面对iPhone16e的销量困境进行分析。一、销量数据惨淡据统计机构数据，iPhone16e在国内市场前三天的销量比起iPhoneSE3的同期销量提升了60%。乍看之下，似乎表现十分火爆，然而这只是数字上的繁荣。
Linux系统下Conda安装状态检查与环境管理指南 2401_85812053 linux
在Linux系统上管理和使用Conda环境是科学计算和数据分析工作中的常见需求。Conda是一个开源的包管理系统和环境管理系统，广泛用于安装多种编程语言的软件包和库。本文将详细介绍如何在Linux上检查Conda是否已经安装，以及如何管理Conda环境。1.Conda简介Conda是一个跨平台的软件包管理系统，它不仅能够管理Python包，还能管理R、Ruby、Lua、Scala等其他语言的包。C
51单片机的寻址方式（完整）二年级程序员 51单片机嵌入式硬件单片机
目录一、立即数寻址二、直接寻址三、寄存器寻址四、寄存器间接寻址五、变址寻址六、位寻址七、指令寻址（一）绝对寻址（二）相对寻址在51单片机中，寻址方式是指在执行指令时，CPU寻找操作数所在存储单元地址的方法。由于计算机的指令执行过程中，常常需要对数据进行操作，而这些数据存储在不同的位置，如寄存器、存储器等，因此需要特定的方式来找到这些数据的地址，从而完成指令的操作。寻址方式的合理运用能够提高程序的执
多线程(4) 噼里啪啦啦. java 算法前端
接着介绍多线程安全问题.由于线程是随机调度,抢占式执行的,随机性就会导致程序的执行顺序产生不同的结果,从而产生BUG.下面是一个线程不安全的例子.packageDemo4;publicclassDemo1{privatestaticintcount=0;publicstaticvoidmain(String[]args)throwsInterruptedException{Threadt1=new
案例驱动的 IT 团队管理：创新与突破之路：第二章团队组建：从人才画像到生态构建-2.2.1星型架构 vs 网状架构对比言析数智案例驱动的 IT 团队管理：创新与突破之路 IT项目管理星型架构网状架构
点击关注不迷路点击关注不迷路点击关注不迷路文章大纲星型架构vs网状架构：IT团队结构创新的双模选择引言：从网络拓扑到组织设计的范式迁移一、架构解析：技术原理与管理哲学的融合1.1星型架构：中心化控制体系1.2网状架构：分布式协作网络二、对比分析：六维能力评估模型2.1核心能力矩阵2.2适用场景对照三、混合架构创新：数字时代的第三选择3.1蜂巢式结构设计3.2动态平衡机制四、转型路线图：四阶段演进路
pbootcms开发网站模版内容列表标签非凡网站 php 开源前端
内容列表标签适用范围：指定栏目编码时全站可用，适用当前列表标签作用：用于调取指定栏目的内容列表或自动当前列表1、当前栏目内容列表{pboot:list}[list:title]{/pboot:list}只能在列表页面使用，带分页，同一个页面只能使用一次，否则：老版本会出现分页冲突，新版会显示一样的内容。V1.2.2版本开始order排序进行调整，默认情况下置顶、推荐、头条具有优先显示，包括使用da
网站源码模板网站网页代码大全下载非凡网站 html 前端
拥有一个专业的网站对于企业和个人来说至关重要。然而，从零开始开发一个网站往往需要大量的时间和技术投入，这对于许多非专业开发者来说是一个巨大的挑战。幸运的是，随着互联网的发展，网站源码模板和网页代码大全的出现，为建站提供了高效、便捷的解决方案。本文将详细介绍网站源码模板和网页代码大全的相关内容，以及如何获取这些资源，帮助你快速搭建出一个功能强大、设计精美的网站。企业网站源码5000多套：Yunbul
静态网页模板静态网站模板下载非凡网站 php html
开发一个功能强大且设计精美的网站往往是一项艰巨的任务。此时，静态网页模板便成为了理想的解决方案。它们不仅能够快速搭建出一个简洁、高效的网站，还能在不牺牲用户体验的前提下，大幅降低开发成本和时间投入。本文将为您详细介绍静态网页模板的优势、选择方法以及如何获取高质量的模板资源。企业网站源码5000多套：Yunbuluo.Net一、静态网页模板的优势（一）加载速度快静态网页模板的核心优势在于其轻量级的结
利用Excel和ArcGIS，依靠起点和终点经纬度生成河流矢量数据 YUANXLLL 笔记 ArcGIS arcgis 经验分享
任务需求：已有相关项目的excel表格数据，包含项目名称、内容以及河流起点和终点的经纬度信息（度分秒格式），根据起点和终点经纬度将对应项目的河流连成直线，并在arcgis中导入至地理数据库中。1、在excel中将度分秒格式的经纬度表示法转换为十进制并保存（每行都包含起点和终点经纬度）转换前：转换后：转换公式：注意公式在“分'”为一位数字时会报错，需要在前面补0。=LEFT(N9,FIND("°",
Dev Container 系列专题（3）：深入配置：自定义你的 Dev Container 不出名的架构师 devops docker
在前两期中，我们了解了DevContainer的概念并快速搭建了一个基于预定义镜像的开发环境。这次，我们将更进一步，探索如何通过自定义配置打造一个完全符合项目需求的DevContainer。本篇将以一个Python项目为例，带你学习配置文件的核心字段、使用Dockerfile定制镜像，并配置开发工具。一、为什么要自定义DevContainer？预定义镜像（如Node.js或Python的官方镜像）
采用 LoRa 解决方案的智慧供应链和物流地理探险家物联网 LoRa 物流方案
冠状病毒病(COVID-19)大流行，不可避免地导致全球供应链和物流行业，出现重大缺口和中断，但LoRa解决方案等新兴技术，可以帮助解决行业在这些充满挑战的时期的困境。物联网LoRa解决方案LoRa（长距离的缩写）是一种无线技术，已开发用于透过用于物联网(IoT)应用的传感器和低功耗广域网(LPWAN)，进行远距离低数据速率通信调制技术。LoRa相对于其他无线技术的优势局域网低功耗广域网蜂窝短距离
Ubuntu 双网卡配置优先级 Bright Xu Linux linux 网络 ubuntu
Ubuntu双网卡配置优先级作者：BrightXuUbuntu的网卡配置跟CentOS不太一样。更多请参考：CentOS双网卡配置优先级根据业务需要，有时候服务器需要两张网卡，一张用于访问外网，另一种用于连接内网。如果在安装系统是就对两张网卡进行配置了的话，就比较方便，这里不再讨论。下面是后期添加的一张网卡ens37，其中ens33用于连接内网，ens37用于连接外网。话不多说，直入正题。启用网卡
【ubuntu虚拟机】ens33未出现在ifconfig问题 qinfinger 虚拟机 ubuntu linux
事情发生与2023年4月12日，windows上安装了docker-desktop，奈何wsl不好用，便卸载了，之后我的虚拟机ubuntu无法联网，于是开始解决之旅事故原因ifconfig查了一下，没有ens33网卡，于是用ipaddress查看，发现是存在的，说明ens33有误。解决方案记录从茫茫人海中，看了这篇文章遇上同样场景，便记录下突然无法连接虚拟机：ifconfig中没有ens33步骤一
Redis常用命令详解：从基础到高阶应用指南黑猫Teng redis 数据库缓存
Redis常用命令详解：从基础到高阶应用指南一、Redis命令使用须知两种连接方式：命令行工具：redis-cli编程客户端（Java/Python等）通用语法：COMMANDKEY[PARAMS]返回值类型：简单字符串（SimpleStrings）错误信息（Errors）整型（Integers）批量字符串（BulkStrings）数组（Arrays）二、核心数据类型操作命令1.字符串（Strin
python导包樱木之 python 开发语言
python导包在python导包中碰到了相对路径和绝对路径的问题，本文主要根据这两个方面就python导包问题进行讲解。本文目录：python导包三种方法python解释器加载包的路径参考：暂无。python导包三种方法三种导包方法及引用方法如下：#假设文件解释如下，我们在my_main.py文件中要加载tools.py中的print1()方法root|-my_main.py|-www|-ymz
Linux_Ubuntu20.04中ens33没有ip ginger_mr Linux
今天换了一个工位（公司网络也是同一个），但是打开电脑虚拟机Ubtuntu连接不上网络，windows上的配置已经检查了一遍发现没什么问题，在Ubtun上发现ens33这个网卡根本没有分配ip。ginger@ubuntu:~$ifconfig-aens33:flags=4098mtu1500ether00:0c:29:ef:77:09txqueuelen1000(以太网)RXpackets0byte
linux makefile tutorial oushaojun2 linux makefile
一个makefile的教程，几个小时就能看完，对makefile有个总体加细节的系统了解，非常不错：LearnMakefilesWiththetastiestexamples中文翻译版：起步-Makefile教程(gavinliu6.github.io)gcc官网手册（用于查找语法细节）：GNUmakemakefile总体跟shell有八成是类似的，不一样的只是几个判断语句和内部函数，以前老是掌握
Ubuntu18.04虚拟机掉电重启后网卡丢失只剩下lo回环网卡ens33网卡不见了新潮技术研究社 Qt开发问题大全算法爬虫大数据百万案例大全 ubuntu linux vmware ifconfig
某天，Ubuntu18.04虚拟机掉电重启后网卡丢失只剩下lo回环网卡执行操作：1.查看所有网卡，ifconfig-a2.执行sudodhclientens333.查看网卡驱动是否还在：lspci–v4.使能网卡：ifconfigens33up5.重启网络服务：/etc/init.d/networkingrestart6.测试：sudoaptupdate7.这里，关键的一步是，dhclienten
python的导包使用 power_kai python
1、查看文件的创建时间importtimeimportosprint（time.localtime(os.path.getatime('E:\\a.txt'))）2、查看文件的修改时间print（time.localtime(os.path.getmtime('E:\\a.txt'))）3、pickle数据转换模块,这个写入的文件是一个二进制文件，普通文本编辑器打开是乱码importpickle#
设计模式介绍 tntxia 设计模式
设计模式来源于土木工程师克里斯托弗亚历山大（http://en.wikipedia.org/wiki/Christopher_Alexander）的早期作品。他经常发表一些作品，内容是总结他在解决设计问题方面的经验，以及这些知识与城市和建筑模式之间有何关联。有一天，亚历山大突然发现，重复使用这些模式可以让某些设计构造取得我们期望的最佳效果。亚历山大与萨拉-石川佳纯和穆雷西乐弗斯坦合作
android高级组件使用(一) 百合不是茶 android RatingBar Spinner
1、自动完成文本框（AutoCompleteTextView） AutoCompleteTextView从EditText派生出来，实际上也是一个文本编辑框，但它比普通编辑框多一个功能：当用户输入一个字符后，自动完成文本框会显示一个下拉菜单，供用户从中选择，当用户选择某个菜单项之后，AutoCompleteTextView按用户选择自动填写该文本框。使用AutoCompleteTex
[网络与通讯]路由器市场大有潜力可挖掘 comsci 网络
如果国内的电子厂商和计算机设备厂商觉得手机市场已经有点饱和了,那么可以考虑一下交换机和路由器市场的进入问题..... 这方面的技术和知识,目前处在一个开放型的状态,有利于各类小型电子企业进入 &nbs
自写简单Redis内存统计shell 商人shang Linux shell 统计Redis内存
#!/bin/bash address="192.168.150.128:6666,192.168.150.128:6666" hosts=(${address//,/ }) sfile="staticts.log" for hostitem in ${hosts[@]} do ipport=(${hostitem
单例模式(饿汉 vs懒汉) oloz 单例模式
package 单例模式; /* * 应用场景:保证在整个应用之中某个对象的实例只有一个 * 单例模式种的《懒汉模式》 * */ public class Singleton { //01 将构造方法私有化，外界就无法用new Singleton()的方式获得实例 private Singleton(){}; //02 申明类得唯一实例 priva
springMvc json支持杨白白 json springmvc
1.Spring mvc处理json需要使用jackson的类库，因此需要先引入jackson包 2在spring mvc中解析输入为json格式的数据:使用@RequestBody来设置输入 @RequestMapping("helloJson") public @ResponseBody JsonTest helloJson() {
android播放，掃描添加本地音頻文件小桔子
最近幾乎沒有什麽事情，繼續鼓搗我的小東西。想在項目中加入一個簡易的音樂播放器功能，就像華為p6桌面上那麼大小的音樂播放器。用過天天動聽或者QQ音樂播放器的人都知道，可已通過本地掃描添加歌曲。不知道他們是怎麼實現的，我覺得應該掃描設備上的所有文件，過濾出音頻文件，每個文件實例化為一個實體，記錄文件名、路徑、歌手、類型、大小等信息。具體算法思想，
oracle常用命令 aichenglong oracle dba 常用命令
1 创建临时表空间 create temporary tablespace user_temp tempfile 'D:\oracle\oradata\Oracle9i\user_temp.dbf' size 50m autoextend on next 50m maxsize 20480m extent management local
25个Eclipse插件 AILIKES eclipse插件
提高代码质量的插件1. FindBugsFindBugs可以帮你找到Java代码中的bug，它使用Lesser GNU Public License的自由软件许可。2. CheckstyleCheckstyle插件可以集成到Eclipse IDE中去，能确保Java代码遵循标准代码样式。3. ECLemmaECLemma是一款拥有Eclipse Public License许可的免费工具，它提供了
Spring MVC拦截器+注解方式实现防止表单重复提交 baalwolf spring mvc
原理：在新建页面中Session保存token随机码，当保存时验证，通过后删除，当再次点击保存时由于服务器端的Session中已经不存在了，所有无法验证通过。 1.新建注解： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
《Javascript高级程序设计(第3版)》闭包理解 bijian1013 JavaScript
“闭包是指有权访问另一个函数作用域中的变量的函数。”--《Javascript高级程序设计(第3版)》看以下代码： <script type="text/javascript"> function outer() { var i = 10; return f
AngularJS Module类的方法 bijian1013 JavaScript AngularJS Module
AngularJS中的Module类负责定义应用如何启动，它还可以通过声明的方式定义应用中的各个片段。我们来看看它是如何实现这些功能的。一.Main方法在哪里如果你是从Java或者Python编程语言转过来的，那么你可能很想知道AngularJS里面的main方法在哪里？这个把所
[Maven学习笔记七]Maven插件和目标 bit1129 maven插件
插件(plugin)和目标(goal) Maven，就其本质而言，是一个插件执行框架，Maven的每个目标的执行逻辑都是由插件来完成的，一个插件可以有1个或者几个目标，比如maven-compiler-plugin插件包含compile和testCompile，即maven-compiler-plugin提供了源代码编译和测试源代码编译的两个目标使用插件和目标使得我们可以干预
【Hadoop八】Yarn的资源调度策略 bit1129 hadoop
1. Hadoop的三种调度策略 Hadoop提供了3中作业调用的策略， FIFO Scheduler Fair Scheduler Capacity Scheduler 以上三种调度算法，在Hadoop MR1中就引入了，在Yarn中对它们进行了改进和完善.Fair和Capacity Scheduler用于多用户共享的资源调度 2. 多用户资源共享的调度
Nginx使用Linux内存加速静态文件访问 ronin47
Nginx是一个非常出色的静态资源web服务器。如果你嫌它还不够快，可以把放在磁盘中的文件，映射到内存中，减少高并发下的磁盘IO。先做几个假设。nginx.conf中所配置站点的路径是/home/wwwroot/res，站点所对应文件原始存储路径：/opt/web/res shell脚本非常简单，思路就是拷贝资源文件到内存中，然后在把网站的静态文件链接指向到内存中即可。具体如下：
关于Unity3D中的Shader的知识 brotherlamp unity unity资料 unity教程 unity视频 unity自学
首先先解释下Unity3D的Shader，Unity里面的Shaders是使用一种叫ShaderLab的语言编写的，它同微软的FX文件或者NVIDIA的CgFX有些类似。传统意义上的vertex shader和pixel shader还是使用标准的Cg/HLSL 编程语言编写的。因此Unity文档里面的Shader，都是指用ShaderLab编写的代码，然后我们来看下Unity3D自带的60多个S
CopyOnWriteArrayList vs ArrayList bylijinnan java
package com.ljn.base; import java.util.ArrayList; import java.util.Iterator; import java.util.List; import java.util.concurrent.CopyOnWriteArrayList; /** * 总述： * 1.ArrayListi不是线程安全的，CopyO
内存中栈和堆的区别 chicony 内存
1、内存分配方面：堆：一般由程序员分配释放，若程序员不释放，程序结束时可能由OS回收。注意它与数据结构中的堆是两回事，分配方式是类似于链表。可能用到的关键字如下：new、malloc、delete、free等等。栈：由编译器(Compiler)自动分配释放，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中
回答一位网友对Scala的提问 chenchao051 scala map
本来准备在私信里直接回复了，但是发现不太方便，就简要回答在这里。问题写道对于scala的简洁十分佩服，但又觉得比较晦涩，例如一例，Map("a" -> List(11,111)).flatMap(_._2)，可否说下最后那个函数做了什么，真正在开发的时候也会如此简洁？谢谢先回答一点，在实际使用中，Scala毫无疑问就是这么简单。
mysql 取每组前几条记录 daizj mysql 分组最大值最小值每组三条记录
一、对分组的记录取前N条记录：例如：取每组的前3条最大的记录 1.用子查询： SELECT * FROM tableName a WHERE 3> (SELECT COUNT(*) FROM tableName b WHERE b.id=a.id AND b.cnt>a. cnt) ORDER BY a.id,a.account DE
HTTP深入浅出 http请求 dcj3sjt126com http
HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则。计算机专家设计出HTTP，使HTTP客户（如Web浏览器）能够从HTTP服务器(Web服务器)请求信息和服务，HTTP目前协议的版本是1.1.HTTP是一种无状态的协议，无状态是指Web浏览器和Web服务器之间不需要建立持久的连接，这意味着当一个客户端向服务器端发出请求，然后We
判断MySQL记录是否存在方法比较 dcj3sjt126com mysql
把数据写入到数据库的时，常常会碰到先要检测要插入的记录是否存在，然后决定是否要写入。　　我这里总结了判断记录是否存在的常用方法：　　sql语句： select count ( * ) from tablename; 　　然后读取count(*)的值判断记录是否存在。对于这种方法性能上有些浪费，我们只是想判断记录记录是否存在，没有必要全部都查出来。
对HTML XML的一点认识 e200702084 html xml
感谢http://www.w3school.com.cn提供的资料 HTML 文档中的每个成分都是一个节点。节点根据 DOM，HTML 文档中的每个成分都是一个节点。 DOM 是这样规定的：整个文档是一个文档节点每个 HTML 标签是一个元素节点包含在 HTML 元素中的文本是文本节点每一个 HTML 属性是一个属性节点注释属于注释节点 Node 层次
jquery分页插件 genaiwei jquery Web 前端分页插件
//jquery页码控件// 创建一个闭包 (function($) { // 插件的定义 $.fn.pageTool = function(options) { var totalPa
Mybatis与Ibatis对照入门于学习 Josh_Persistence mybatis ibatis 区别联系
一、为什么使用IBatis/Mybatis 对于从事 Java EE 的开发人员来说，iBatis 是一个再熟悉不过的持久层框架了，在 Hibernate、JPA 这样的一站式对象 / 关系映射（O/R Mapping）解决方案盛行之前，iBaits 基本是持久层框架的不二选择。即使在持久层框架层出不穷的今天，iBatis 凭借着易学易用、
C中怎样合理决定使用那种整数类型？秋风扫落叶 c 数据类型
如果需要大数值(大于32767或小于32767), 使用long 型。否则, 如果空间很重要 (如有大数组或很多结构), 使用 short 型。除此之外, 就使用 int 型。如果严格定义的溢出特征很重要而负值无关紧要, 或者你希望在操作二进制位和字节时避免符号扩展的问题, 请使用对应的无符号类型。但是, 要注意在表达式中混用有符号和无符号值的情况。 &nbs
maven问题 zhb8015 maven问题
问题1： Eclipse 中新建maven项目无法添加src/main/java 问题 eclipse创建maevn web项目，在选择maven_archetype_web原型后，默认只有src/main/resources这个Source Floder。按照maven目录结构，添加src/main/ja
(二)androidpn-server tomcat版源码解析之--push消息处理 spjich java androdipn 推送
在 (一)androidpn-server tomcat版源码解析之--项目启动这篇中，已经描述了整个推送服务器的启动过程，并且把握到了消息的入口即XmppIoHandler这个类，今天我将继续往下分析下面的核心代码，主要分为3大块，链接创建，消息的发送，链接关闭。先贴一段XmppIoHandler的部分代码 /** * Invoked from an I/O proc
用js中的formData类型解决ajax提交表单时文件不能被serialize方法序列化的问题中华好儿孙 JavaScript Ajax Web 上传文件 FormData
var formData = new FormData($("#inputFileForm")[0]); $.ajax({ type:'post', url:webRoot+"/electronicContractUrl/webapp/uploadfile", data:formData, async: false, ca
mybatis常用jdbcType数据类型 ysj5125094 mybatis mapper jdbcType
MyBatis 通过包含的jdbcType 类型 BIT FLOAT CHAR

【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注

【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注

你可能感兴趣的:(【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注)