如何使用百度地图来进行来改变主题模板的样式

发布者:jintianlong 阅读量:15 时间:2018.11.27

最近文汇建站小编在进行页面开发,遇到一键百度地图主题样式修改方面的问题,今天小编就来详细的和大家分享一下自己的心得。

首先我们需要先找到百度地图api的官方文档,然后找到个性化地图中的设置主题模板样式,把下图中官方文档的内容先复制进去,改下位置和精度,在script标签处的密钥改成自己的。如下图:

image.png

image.png

然后我们可以看到里面有个主题选择

image.png

这里百度地图api为我们提供了以下可选列表

<select id="stylelist" onchange="changeMapStyle(this.value)">

    <option value="normal">默认地图样式</option> //系统默认

    <option value="light">清新蓝风格</option> //不需要第三方库

    <option value="dark">黑夜风格</option>    //不需要第三方库

    <option value="redalert">红色警戒风格</option>

    <option value="googlelite">精简风格</option>

    <option value="grassgreen">自然绿风格</option>

    <option value="midnight">午夜蓝风格</option>

    <option value="pink">浪漫粉风格</option>

    <option value="darkgreen">青春绿风格</option>

    <option value="bluish">清新蓝绿风格</option>

    <option value="grayscale">高端灰风格</option>

    <option value="hardedge">强边界风格</option>

</select>

同时我们可以加入下面的代码

function changeMapStyle(style){

    var mapStyle ={

        features: ["road","building","water","land"],//隐藏地图上的"poi",

        style : style,

    };

    map.setMapStyle(mapStyle);

}

以替换原来官方文档中的js用来指定样式,在使用时只需要将上面的  style : style,后面的那个style替换成原来的官方文档中可选列表option中的value值即可,但是这只局限于前三个。

function changeMapStyle(style){

map.setMapStyle({style:style});

$('#desc').html(mapstyles[style].desc);

}

要是我们想之后后面的几个,这时我们这时可以引入一个外部的js库<script type="text/javascript" src="http://developer.baidu.com/map/custom/stylelist.js"></script>

然后再重复上面的操作即可,这样我们想要的效果就可以实现了。

image.png