• 欢迎访问全栈之路
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧
  • 欢迎留言o(∩_∩)o 哈哈

百度地图开发-自定义皮肤,自定义覆盖物,自定义弹出层

HTML5 Torry.Yao 1584次浏览 1个评论

开发官网(摩比)需要用到调用百度地图,需要自定义皮肤,做成酱婶的。——>


黑色高冷的地图。
认真看了下API,找到了自定义地图工具,戳http://developer.baidu.com/map/custom/
这是我们用到的配置JSON,

var mapstyle=[
        {"featureType": "land", "elementType": "geometry", "stylers": {"color": "#212121"}},
        {"featureType": "building","elementType": "geometry", "stylers": {"color": "#2b2b2b"}},
        {"featureType": "highway", "elementType": "all", "stylers": {"lightness": -42, "saturation": -91}},
        {"featureType": "arterial", "elementType": "geometry", "stylers": {"lightness": -77, "saturation": -94}},
        {"featureType": "green", "elementType": "geometry", "stylers": {"color": "#1b1b1b"}},
        {"featureType": "water", "elementType": "geometry", "stylers": {"color": "#181818"}},
        {"featureType": "subway", "elementType": "geometry.stroke", "stylers": {"color": "#181818"}},
        {"featureType": "railway", "elementType": "geometry", "stylers": {"lightness": -52}},
        {"featureType": "all", "elementType": "labels.text.stroke", "stylers": {"color": "#313131"}},
        {"featureType": "all", "elementType": "labels.text.fill", "stylers": {"color": "#8b8787"}},
        {"featureType": "manmade", "elementType": "geometry", "stylers": {"color": "#1b1b1b"}},
        {"featureType": "local", "elementType": "geometry", "stylers": {"lightness": -75, "saturation": -91}},
        {"featureType": "highway", "elementType": "all", "stylers": {"lightness": -65, "visibility": "off"}},
        {"featureType": "railway", "elementType": "all", "stylers": {"lightness": -40, "visibility": "off"}},
        {"featureType": "boundary", "elementType": "geometry", "stylers": {"color": "#8b8787", "weight": "1", "lightness": -29}},
        {"featureType": "poi", "elementType": "all", "stylers": {"visibility": "off"}},
        {"featureType": "subway", "elementType": "labels.icon", "stylers": {"lightness": -53, "saturation": -56, "visibility": "off"}},
        {"featureType": "subway", "elementType": "geometry.fill", "stylers": {"lightness": -53}}
    ];

隐藏了道路,铁路,poi等,使场馆更加突出。
应用方法:

map.setMapStyle({
        styleJson:mapstyle
    });

全栈之路 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明百度地图开发-自定义皮肤,自定义覆盖物,自定义弹出层
喜欢 (5)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址