第18行: | 第18行: | ||
| [[jspopularGL/guide/maptype|变更地图类型]] | | [[jspopularGL/guide/maptype|变更地图类型]] | ||
|} | |} | ||
− | </div></div><div class="header"><div class="active">核心代码</div></div><div class="pre-wrap"><div class="pre-wrap-w pre-wrap-w-and"><pre class="prettyprint | + | </div></div><div class="header"><div class="active">核心代码</div></div><div class="pre-wrap"><div class="pre-wrap-w pre-wrap-w-and"><pre class="prettyprint codestyle"> var map = new BMapGL.Map('container'); |
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 18); // 设置中心点和地图级别 | map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 18); // 设置中心点和地图级别 | ||
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放 | map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放 | ||
第38行: | 第38行: | ||
} | } | ||
</pre> | </pre> | ||
− | + | </div></div></div></div> |
2020年10月9日 (五) 16:44的最后版本
基础地图展示
功能场景
该示例介绍如何使用GL版API创建一张地图,并通过设置地图类型方法,展示3D地图与卫星地球地图之间的切换。
DEMO
https://bj.bcebos.com/v1/mapopen/api-demos/video/地图类型.mp4
3D地图与卫星地球地图切换
核心代码
var map = new BMapGL.Map('container'); map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 18); // 设置中心点和地图级别 map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放 map.addControl(new BMapGL.NavigationControl3D()); // 添加3D控件 function changeMapType(e) { if (e.className.indexOf('current') === -1) { var allLi = document.getElementsByClassName('btn'); for (var i = 0; i < allLi.length; i++) { allLi[i].className = allLi[i].className.replace(' current','').trim(); } e.className += ' current'; if (e.className.indexOf('normal') != -1) { map.setMapType(BMAP_NORMAL_MAP); } else { map.setMapType(BMAP_EARTH_MAP); } } }