首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

作者：家里蹲是如何炼成的 | 来源：互联网 | 2023-09-24 15:48
摘要：如果你自己的数据已经超过1万个，如何进行合理的显示？除了聚合marker外，还有一个办法。那就是，只显示

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

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

成品图&＃xff1a;

 

 

工具描述&＃xff1a;

移动地图时&＃xff08;或改变地图级别时&＃xff09;&＃xff0c;只显示可视区域内的标注。非可视区域内的标注都移除。

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

 

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

如果有超过300个marker&＃xff0c;建议使用聚合marker类&＃xff0c;请参考LIB&＃xff1a;http://dev.baidu.com/wiki/map/index.php?title&＃61;MapLibrary

 

 

 

1、从数据库里读取信息

数据库里需要存储的信息至少为&＃xff1a;经纬度point&＃xff0c;标注图片icon。

读取后&＃xff0c;创建点、标注。&＃xff08;注意&＃xff1a;只是创建标注&＃xff0c;并不添加到地图上。&＃xff09;

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

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

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

 

为了方便运算&＃xff0c;用一个数组将标注集合起来&＃xff1a;

//建立一个marker的数组
var markers &＃61; [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可以轻松判断&＃xff0c;标注是否在可视区域内。

几何运算LIB&＃xff1a;http://dev.baidu.com/wiki/map/index.php?title&＃61;MapLibrary

 

判断标注如果在可视区域内&＃xff0c;则添加到地图上&＃xff1b;如果标注不在可视区域内&＃xff0c;则删除它。

判断代码&＃xff1a;

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



 

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

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

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



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

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

//添加一个矩形覆盖物
var polyline &＃61; 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);



 

 

 

本例全部源代码&＃xff1a;

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

//添加一个矩形覆盖物
var polyline &＃61; 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 &＃61; &＃39;&＃39;;
for(i&＃61;0;i<markers.length;i&＃43;&＃43;){
var result &＃61; BMapLib.GeoUtils.isPointInRect(markers[i].point, map.getBounds());
if(result &＃61;&＃61; true) map.addOverlay(markers[i]);
else map.removeOverlay(markers[i]);
document.getElementById("info").innerHTML &＃43;&＃61; &＃39;&＃39; &＃43; markers[i].getIcon().imageUrl &＃43;&＃39;" />&＃39;;
}
}


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

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

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

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

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

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

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

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

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

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

//建立一个marker的数组
var markers &＃61; [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  更新代码&＃xff1a;修改addMymarkers函数。

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

 

部分源代码&＃xff1a;

//显示可视区域内的标注
function addMymarkers(){
document.getElementById("info").innerHTML &＃61; "小于10个用户";
var j &＃61; 0;
for(i&＃61;0;ivar result &＃61; BMapLib.GeoUtils.isPointInRect(markers[i].point, map.getBounds());
if(result &＃61;&＃61; true && j<10) {
map.addOverlay(markers[i]);
&＃43;&＃43;j;
}
else if(result &＃61;&＃61; true && j>&＃61;10){
&＃43;&＃43;j;
document.getElementById("info").innerHTML &＃61; "可视区域内的用户数&＃xff1a;
" &＃43; j &＃43; "";
map.removeOverlay(markers[i]);
}
else map.removeOverlay(markers[i]);
}
}



转:https://www.cnblogs.com/milkmap/archive/2012/02/02/2335989.html



推荐阅读
  • 数组

    准备面试三

    1、对于List而言，要不然就使用迭代器，要不然就从后往前删除，从前往后删除会出现角标越界。因为我List有两个remove方法，一个是int作为形参(删除指定位置的元素)，一个是 ... [详细]
  • int

    第38天：Python decimal 模块

    第38天：Python decimal 模块
    by程序员野客在我们开发工作中浮点类型的使用还是比较普遍的，对于一些涉及资金金额的计算更是不能有丝毫误差，Python的decimal模块为浮点型精确计算提供了支持。1简介deci ... [详细]
  • int

    根据时间更改网站背景的脚本。热！

    根据时间更改网站背景的脚本。热！
    我在网上找到了它，并以自己的方式对其进行了自定义；作者的功劳就在那里。实际上，这是一个用于更改背景颜色的脚本，并且在我看来& ... [详细]
  • 数组

    java – 将带有二进制数据的byte []转换为String

    我有二进制格式的数据(十六进制：803bc8870a89),我需要将其转换为字符串,以便通过Jackcess在MSAccess数据库中保存二进制数据.我知道,我不认为在Java中使用 ... [详细]
  • int

    去掉英文句子中重复出现的单词和标点符号

    #includestdafx.h#includeiostream#includesstream#includemap#includestring ... [详细]
  • 数组

    175.Shortest Unsorted Continuous Subarray（最短未分类连续子阵列）

    题目：Givenanintegerarray,youneedtofindone continuoussubarray thatifyouonlysortthissubarrayin ... [详细]
  • window

    JavaScript在网页设计中的嵌入应用方法是什么

    本篇内容主要讲解“JavaScript在网页设计中的嵌入应用方法是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小 ... [详细]
  • java

    两种方式实现Flink异步IO查询Mysql

    两种方式实现Flink异步IO查询Mysql
    如官网所描述的Flink支持两种方式实现异步IO查询外部系统http ... [详细]
  • int

    leetcode之Sort List

    SortalinkedlistinO(nlogn)timeusingconstantspacecomplexity.这道题属于人生中第一次对链表进行操作，首先，不同于C++中的st ... [详细]
  • java

    入门学什么php框架简单(2023年最新分享)

    导读：很多朋友问到关于入门学什么php框架简单的相关问题，本文编程笔记就来为大家做个详细解答，供大家参考，希望对大家有所帮助！一起来看看吧！本文目录一览： ... [详细]
  • int

    Douce France 温馨的法兰西

    法国人家喻户晓的一首歌，很老的一首了。旋律轻盈，歌词温馨会把你带回到小时候的回忆中去。Ilrevientàmamémoire一切都回到我脑海中Dessouvenirsfamilie ... [详细]
  • int

    jq实现定时弹出广告

    首页#father{border:0pxso ... [详细]
  • 数组

    Java应用：编写高级JavaScript应用代码

    1、创建高级对象使用构造函数来创建对象构造函数是一个函数，调用它来例示并初始化特殊类型的对象。可以使用new关键字来调用一个构造函数。下面给出了使用构造函数的新示例。 ... [详细]
  • int

    下载进度的制作

    这两天做了一个小项目，里面有个下载进度的进度条需要制作。先看呈现的效果：点击进度，然后依次递增，直到递增到百分之百。现在把这部分代码分享下来。<!DOCTYPEhtml><html ... [详细]
  • 数组

    可用ip地址怎么算,ip地址的分类如何划分

    举个例子：就用上一题的数值：100100110是一个二进制数，从右往左依次乘10的0次方，1次方、2次方这样加下去。如果有十进制数或者十六进制数想转换为八进制数，可以先将他们转换为 ... [详细]
author-avatar
家里蹲是如何炼成的
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有