自定义地图样式-例子

    const map = this.map = new BMap.Map(this.map_container.nativeElement, {
      enableMapClick: true,
      // minZoom: 11,
      // maxZoom : 11
    }); // 创建地图实例


    // 这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点,其中116.404表示经度,39.915表示纬度。(为天安门坐标)

    const point = new BMap.Point(113.922329, 22.49656); // 坐标可以通过百度地图坐标拾取器获取 --万融大厦
    map.centerAndZoom(point, 19); // 设置中心和地图显示级别
    // map.centerAndZoom(new BMap.Point(105.403119, 38.028658), 5);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

    // 地图自定义样式
    map.setMapStyle({
      styleJson: [{
        'featureType': 'water',
        'elementType': 'all',
        'stylers': {
          'color': '#044161'
        }
      }, {
        'featureType': 'land',
        'elementType': 'all',
        'stylers': {
          'color': '#091934'
        }
      }, {
        'featureType': 'boundary',
        'elementType': 'geometry',
        'stylers': {
          'color': '#064f85'
        }
      }, {
        'featureType': 'railway',
        'elementType': 'all',
        'stylers': {
          'visibility': 'on'
        }
      }, {
        'featureType': 'highway',
        'elementType': 'geometry',
        'stylers': {
          'color': '#004981'
        }
      }, {
        'featureType': 'highway',
        'elementType': 'geometry.fill',
        'stylers': {
          'color': '#005b96',
          'lightness': 1
        }
      }, {
        'featureType': 'highway',
        'elementType': 'labels',
        'stylers': {
          'visibility': 'on'
        }
      }, {
        'featureType': 'arterial',
        'elementType': 'geometry',
        'stylers': {
          'color': '#004981',
          'lightness': -39
        }
      }, {
        'featureType': 'arterial',
        'elementType': 'geometry.fill',
        'stylers': {
          'color': '#00508b'
        }
      }, {
        'featureType': 'poi',
        'elementType': 'all',
        'stylers': {
          'visibility': 'on'
        }
      }, {
        'featureType': 'green',
        'elementType': 'all',
        'stylers': {
          'color': '#056197',
          'visibility': 'off'
        }
      }, {
        'featureType': 'subway',
        'elementType': 'all',
        'stylers': {
          'visibility': 'on'
        }
      }, {
        'featureType': 'manmade',
        'elementType': 'all',
        'stylers': {
          'visibility': 'off'
        }
      }, {
        'featureType': 'local',
        'elementType': 'all',
        'stylers': {
          'visibility': 'off'
        }
      }, {
        'featureType': 'arterial',
        'elementType': 'labels',
        'stylers': {
          'visibility': 'on'
        }
      }, {
        'featureType': 'boundary',
        'elementType': 'geometry.fill',
        'stylers': {
          'color': '#029fd4'
        }
      }, {
        'featureType': 'building',
        'elementType': 'all',
        'stylers': {
          'color': '#1a5787'
        }
      }, {
        'featureType': 'label',
        'elementType': 'all',
        'stylers': {
          'visibility': 'off'
        }
      }, {
        'featureType': 'poi',
        'elementType': 'labels.text.fill',
        'stylers': {
          'color': '#ffffff'
        }
      }, {
        'featureType': 'poi',
        'elementType': 'labels.text.stroke',
        'stylers': {
          'color': '#1e1c1c'
        }
      }, {
        'featureType': 'administrative',
        'elementType': 'labels',
        'stylers': {
          'visibility': 'on'
        }
      }, {
        'featureType': 'road',
        'elementType': 'labels',
        'stylers': {
          'visibility': 'on'
        }
      }]
    });

参考:

http://mapv.baidu.com/examples/#baidu-map-point-weibo.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值