JavaScript Api lite 专门针对移动web端的场景和特点,提供了高性能的海量覆盖物接口。详见类参考。
请参考文档最后扫描二维码体验~
海量覆盖物允许对覆盖物的图标和数量进行自定义,之后添加到地图上或删除。具体步骤:
首先对地图进行初始化。
var liteMap = new BMap.Map('map_container');var pt = new BMap.Point(12697576, 2560310);liteMap.centerAndZoom(pt, 12);
本示例中,在地图初始化的可见区域内,随机生成500个覆盖物。
// 获取地图区域的边界var bounds = liteMap.getBounds();// 获取西南角的经纬度信息var sw = bounds.getSouthWest();// 获取东北角的经纬度信息 东边的经度>西边的经度 北边的纬度>南边的纬度var ne = bounds.getNorthEast();// lng为longitude 经度 lat为latitude纬度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));// 变换iconvar iconOffsetX = 42;var iconOffsetY = 66;// 初始化iconvar 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);}
liteMap.addMassFeatures(arrFeatures);
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();}});}
liteMap.removeMassFeatures(arrFeatures);
扫描二维码体验:

上一篇
下一篇