百度地图lite api 是专门为h5 绘制海量点设计的,但是偏偏忽略掉了点聚合的需求,所以需要自己动手,做一次二次改造。

我们知道点聚合需要引入开源库:

MarkerClusterer:  http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer.js

TextIconOverlay: http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay.js

由于是开源库,我们可以直接把代码撸下来保存直接放到自己的业务里使用

我们在  MarkerClusterer  addMarkers的时候浏览器会报错,

是因为lite api中的map对象及bounds对象缺乏两个方法:

map.getDistance  及   bounds.containsPoint

getDistance方法是计算两个点之间的直线距离,返回数值为米,这个方法网上就有

 const EARTH_RADIUS = 6378137.0;
const {PI} = Math; function getRad(d){
return d*PI/180.0;
} function getDistance(start,end){
let lat1 = +start.lat;
let lat2 = +end.lat;
let lng1 = +start.lng;
let lng2 = +end.lng;
if(lat1==lat2 && lng1 == lng2){
return 0;
}
let f = getRad((lat1 + lat2)/2);
let g = getRad((lat1 - lat2)/2);
let l = getRad((lng1 - lng2)/2);
let sg = Math.sin(g);
let sl = Math.sin(l);
let sf = Math.sin(f);
let s,c,w,r,d,h1,h2;
let a = EARTH_RADIUS;
let fl = 1/298.257;
sg = sg*sg;
sl = sl*sl;
sf = sf*sf;
s = sg*(1-sl) + (1-sf)*sl;
c = (1-sg)*(1-sl) + sf*sl;
w = Math.atan(Math.sqrt(s/c));
r = Math.sqrt(s*c)/w;
d = 2*w*a;
h1 = (3*r -1)/2/c;
h2 = (3*r +1)/2/s;
return d*(1 + fl*(h1*sf*(1-sg) - h2*(1-sf)*sg));
}

我们把这个方法赋到map对象上

 var MarkerClusterer = function (map, options) {
if (!map) {
return;
}
map.getDistance = getDistance; // 这里
this._map = map;
this._markers = [];
this._clusters = []; var opts = options || {};
this._gridSize = opts["gridSize"] || 60;
this._maxZoom = opts["maxZoom"] || 18;
this._minClusterSize = opts["minClusterSize"] || 2;
this._isAverageCenter = false;
if (opts['isAverageCenter'] != undefined) {
this._isAverageCenter = opts['isAverageCenter'];
}
this._styles = opts["styles"] || []; var that = this;
this._map.addEventListener("zoomend", function () {
that._redraw();
}); this._map.addEventListener("moveend", function () {
that._redraw();
}); var mkrs = opts["markers"];
isArray(mkrs) && this.addMarkers(mkrs);
};

map对象就补齐了

containsPoint 是计算点是否在bounds给定的区域中,这个更简单

 var getExtendedBounds = function (map, bounds, gridSize) {
bounds = cutBoundsInRange(bounds);
var pixelNE = map.pointToPixel(bounds.getNorthEast());
var pixelSW = map.pointToPixel(bounds.getSouthWest());
pixelNE.x += gridSize;
pixelNE.y -= gridSize;
pixelSW.x -= gridSize;
pixelSW.y += gridSize;
var newNE = map.pixelToPoint(pixelNE);
var newSW = map.pixelToPoint(pixelSW);
let nb = new BMap.Bounds(newSW, newNE);
// 写在这里
nb.containsPoint = function(point){
var lat = point.lat;
var lng = point.lng;
if(!point || !point.lat || !point.lng){
return false;
} else {
return lat>this._swLat && lat < this._neLat && lng<this._neLng && lng>this._swLng;
}
}
return nb;
};

至此MarkerClusterer 改造完毕

然后是改造TextIconOverlay

由于lite api 返回的MarkerPane

 TextIconOverlay.prototype.initialize = function (map) {
this._map = map; this._domElement = document.createElement('div');
this._updateCss();
this._updateText();
this._updatePosition(); this._bind();
// 将markerMouseTarget 替换成markerPane
this._map.getPanes().markerPane.appendChild(this._domElement);
return this._domElement;
};

这样就可以了

百度地图js lite api 支持点聚合的更多相关文章

  1. 百度地图--JS版

    百度地图JS版本 ----选择关键字地图展示对应地址---- CSS body, html { width: %; height: %; margin: ; font-family: "微软 ...

  2. 外部引入的js 判断js脚本加载是否完成,完成后执行 相应的动作(以引入百度地图js为例)

    可以使用JQuery的 $.getScript(url,function(){});方法 $.getScript("http://api.map.baidu.com/getscript?v= ...

  3. 【完全开源】百度地图Web service API C#.NET版,带地图显示控件、导航控件、POI查找控件

    目录 概述 功能 如何使用 参考帮助 概述 源代码主要包含三个项目,BMap.NET.BMap.NET.WindowsForm以及BMap.NET.WinformDemo. BMap.NET 对百度地 ...

  4. C# 调用百度地图Web服务API

    最近公司项目中需要根据两个地点的交通路径和距离做一些数据推荐,为了程序的稳定和用户体验所以想从百度地图 API 采集数据保存到数据库中,经过一翻研究之后选定了百度地图 Web 服务 API 中的 Di ...

  5. C# 调用百度地图 Web 服务 API

    最近公司项目中需要根据两个地点的交通路径和距离做一些数据推荐,为了程序的稳定和用户体验所以想从百度地图 API 采集数据保存到数据库中,经过一翻研究之后选定了百度地图 Web 服务 API 中的 Di ...

  6. 【转】【完全开源】百度地图Web service API C#.NET版,带地图显示控件、导航控件、POI查找控件

    [转][完全开源]百度地图Web service API C#.NET版,带地图显示控件.导航控件.POI查找控件 目录 概述 功能 如何使用 参考帮助 概述 源代码主要包含三个项目,BMap.NET ...

  7. Node.js调用百度地图Web服务API的Geocoding接口进行点位反地理信息编码

    (从我的新浪博客上搬来的,做了一些修改.) 最近迷上了node.js以及JavaScript.现在接到一个活,要解析一个出租车点位数据的地理信息.于是就想到使用Node.js调用百度地图API进行解析 ...

  8. 百度地图JS API不能使用position:fixed

    用于放置百度地图的dom元素及其任何一级父元素设置position:fixed属性时,js会报如下错误: Uncaught TypeError: Cannot read property 'offse ...

  9. 百度地图 JS API开发Demo01

    百度地图DEMO     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

随机推荐

  1. codeforces 1023 D. Array Restoration 并查集

    D. Array Restoration time limit per test 1 second memory limit per test 256 megabytes input standard ...

  2. BZOJ 1177 Oil(特技枚举)

    对于三个正方形的位置一共有六种情况. 预处理出(i,j)左上角,左下角,右上角,右下角区域内最大权值的正方形. 枚举分界线更新答案. 刚开始想了一个错误的DP也是蠢啊. #include<set ...

  3. python常用模块collections os random sys

    Python 模块(Module),是一个 Python 文件,以 .py 结尾,包含了 Python 对象定义和Python语句. 模块让你能够有逻辑地组织你的 Python 代码段. 把相关的代码 ...

  4. l洛谷 (水题)P4144 大河的序列

    题目戳 Solution: 这题前面都是废话,关键的一句就是本题求的是序列中连续一段的相与值(&)+相或值(|)最大,然后对这个值进行快速幂取模.考虑到两个数相与最大能得到的就是这两个数中的最 ...

  5. IOS中手势UIGestureRecognizer

    通常在对视图进行缩放移动等操作的时候我们可以用UIScrollView,因为它里边自带了这些功能,我们要做的就是告诉UIScrollView的几个相关参数就可以了 但是没有实现旋转的手势即UIRota ...

  6. 【BZOJ3156】防御准备(动态规划,斜率优化)

    [BZOJ3156]防御准备(动态规划,斜率优化) 题面 BZOJ 题解 从右往左好烦啊,直接\(reverse\)一下再看题. 设\(f[i]\)表示第\(i\)个位置强制建立检查站时,前面都满足条 ...

  7. [POI2008]MAF-Mafia

    Description 有n个人,每个人手里有一把手枪.一开始所有人都选定一个人瞄准(有可能瞄准自己).然后他们按某个顺序开枪,且任意时刻只有一个人开枪.因此,对于不同的开枪顺序,最后死的人也不同. ...

  8. HDU6129 规律

    LINK 题意:n个数进行m次前缀和异或和后的情况,其中$n,m(1\leq n\leq2\times10^5,1\leq m\leq10^9)$. 思路:看到m这么大,肯定要分解m的,又是异或和,二 ...

  9. Unsupervised learning, attention, and other mysteries

    Unsupervised learning, attention, and other mysteries Get notified when our free report “Future of M ...

  10. jQuery UI基本使用方法

    其实jQuery UI早就在我的学习计划中,只不过因为计划安排始终处于待命状态,最近项目要用到jQuery UI,就提前学习一下,也想能够封装自己的UI库,这样就不用老按照别人的套路走了,像使用jQu ...