Vue集成百度地图 baidumap 个性化地图的使用

引入百度地图

在main.js引入百度地图

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: ''
})

在页面添加bm-map

<baidu-map class="baidumap" :center="{lng: 116.404, lat: 39.915}" :zoom="6"  :scroll-wheel-zoom="true"  @ready="handler" > 
             <bm-marker
              v-for="(item, index) in markers"
              :key="index"
              :position="item.point"
              :dragging="true"
              :icon=" {
                url: require('@/assets/icon-zaixian.png'),
                size: { width: 50, height: 50 },
              }"
              >
              </bm-marker>
            </baidu-map>`

handler 添加个性化地图样式

    handler({BMap, map}) {
       map.addControl(new BMap.NavigationControl());
        //添加地图类型控件
       map.addControl(new BMap.MapTypeControl());
          map.setMapStyleV2({
          styleId: '样式id'
        })
        }

效果展示