（以“<div id="examples_api_center"><div class="title-hd">个性化地图</div></div><div class="demos_wrap"><div class="header"><div class="active">功能场景</div></di...”为内容创建页面） |
|||
| 第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 prettyprinted pre-and"> | + | </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 prettyprinted pre-and"> var map = new BMapGL.Map('container'); |
| − | + | map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); | |
| − | + | map.enableScrollWheelZoom(true); | |
| − | + | map.setMapStyleV2({styleJson: styleJson1}); | |
| − | + | function setCustomStyle(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('light') !== -1) { | |
| − | + | map.setMapStyleV2({styleJson: styleJson1}); | |
| − | + | } else { | |
| − | + | map.setMapStyleV2({styleJson: styleJson2}); | |
| − | + | } | |
| − | + | } | |
| − | + | } | |
| − | + | </pre> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
<div class="pre-btn"><div class="pre-btn-copy-and">复制</div><div class="pre-btn-cb-and">深色</div></div><div class="success">复制成功</div></div></div></div></div> | <div class="pre-btn"><div class="pre-btn-copy-and">复制</div><div class="pre-btn-cb-and">深色</div></div><div class="success">复制成功</div></div></div></div></div> | ||
2020年10月9日 (五) 14:09的版本
个性化地图
功能场景
该示例介绍如何自定义地图样式。
DEMO
https://mapopen-website-wiki.cdn.bcebos.com/wiki/android-loc-sdk/sdkgetAK.mov
白天模式与黑夜模式切换
核心代码
var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
map.enableScrollWheelZoom(true);
map.setMapStyleV2({styleJson: styleJson1});
function setCustomStyle(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('light') !== -1) {
map.setMapStyleV2({styleJson: styleJson1});
} else {
map.setMapStyleV2({styleJson: styleJson2});
}
}
}
复制
深色
复制成功