第1行: | 第1行: | ||
{{jspopularLiteV1-sidebar}} | {{jspopularLiteV1-sidebar}} | ||
− | <div class="bluetitle"><div class=" | + | <div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>简介</span></div></div></div><div class="serve-explain-text">JavaScript Api lite 专门针对移动web端的场景和特点,提供了高性能的海量覆盖物接口。详见[http://lbsyun.baidu.com/cms/jsapi/reference/lite.html#a3b5 类参考]。<br/><span style="color:#FF0000;">请参考文档最后扫描二维码体验~</span></div><!--jsapi单独demo-代码--><div class="aloneDemo"><div dir="https://lbsyun.baidu.com/cms/jsapi/demo/jsapiLite/lite_2_2.html"></div><div class="top_right">[http://lbsyun.baidu.com/jsdemo.htm#lite_2_2 DEMO详情]</div></div><div class="devguide"><div class="leftborderbg" style="height:50000px;"></div><div class="serve-explain-text">海量覆盖物允许对覆盖物的图标和数量进行自定义,之后添加到地图上或删除。具体步骤:</div><div class="devguideorder"><span>1</span>初始化地图</div><div class="devguidecenter">首先对地图进行初始化。<pre class="prettyprint codestyle">var liteMap = new BMap.Map('map_container'); |
var pt = new BMap.Point(12697576, 2560310); | var pt = new BMap.Point(12697576, 2560310); | ||
liteMap.centerAndZoom(pt, 12); | liteMap.centerAndZoom(pt, 12); | ||
第51行: | 第51行: | ||
http://mapopen-pub-jsapi.bj.bcebos.com/bmap-Lite%2F2-2bigdata0.png | http://mapopen-pub-jsapi.bj.bcebos.com/bmap-Lite%2F2-2bigdata0.png | ||
+ | <div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"></div></div></div |
2022年8月19日 (五) 15:05的最后版本
简介
海量覆盖物允许对覆盖物的图标和数量进行自定义,之后添加到地图上或删除。具体步骤:
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);
扫描二维码体验:
</div