浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。
简介
JavaScript Api lite 专门针对移动web端的场景和特点,提供了高性能的海量覆盖物接口。详见类参考
请参考文档最后扫描二维码体验~
海量覆盖物允许对覆盖物的图标和数量进行自定义,之后添加到地图上或删除。具体步骤:
1初始化地图
首先对地图进行初始化。
var liteMap = new BMap.Map('map_container');
var pt = new BMap.Point(12697576, 2560310);
liteMap.centerAndZoom(pt, 12);
2初始化海量覆盖物
本示例中,在地图初始化的可见区域内,随机生成500个覆盖物。
// 获取地图区域的边界
var bounds = liteMap.getBounds();
// 获取西南角的经纬度信息
var sw = bounds.getSouthWest();
// 获取东北角的经纬度信息 东边的经度>西边的经度 北边的纬度>南边的纬度
var ne = bounds.getNorthEast();

// lng为longitute 经度 lat为latitute纬度
var lngSpan = ne.lng - sw.lng;
var latSpan = ne.lat - sw.lat;
var arrFeatures = [];
for (var i = 0; i < 500; i ++) {
// 初始化位置
var mpt = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7 + 0.15),
sw.lat + latSpan * (Math.random() * 0.7 + 0.15));
// 变换icon
var iconOffsetX = 42;
var iconOffsetY = 66;
// 初始化icon
var icon = new BMap.Icon('./images/test.png', new BMap.Size(42, 64), {
backGroundImageSize: new BMap.Size(600, 600),
imageOffset: new BMap.Size(0 - iconOffsetX * Math.floor(Math.random() * 9),
0 - iconOffsetY * Math.floor(Math.random() * 3))
});
var massFeature = new BMap.MassFeature(mpt, {icon: icon, data: 'MassFeature' + i});
arrFeatures.push(massFeature);
}
3把海量覆盖物添加到地图中
liteMap.addMassFeatures(arrFeatures);
4为海量覆盖物添加点击事件,可以获取点击的覆盖物的属性
liteMap.addEventListener('massfeaturesclick', function (evt) {
var popup = document.querySelector('.popup');
var massFeatures = evt.massFeatures;
if (massFeatures.length > 0) {
var feature = massFeatures[0];
var name = feature.getData();
var point = feature.getPosition();
}
});
}
5移除海量覆盖物
liteMap.removeMassFeatures(arrFeatures);

扫描二维码体验:

bmap-Lite%2F2-2bigdata0.png

  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误,或对此文档有更好的建议,请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消