Vue integrates the use of personalized map of baidumap

Introduction of Baidu Map

Introduce Baidu Map in main.js

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  / / ak is key in baidu map developer platform applications See http://lbsyun.baidu.com/apiconsole/key * /
  ak: ' '
})

Copy the code

Add bM-map to the page

<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>`

Copy the code

Handler adds personalized map styles

    handler({BMap, map}) {
       map.addControl(new BMap.NavigationControl());
        // Add a map type control
       map.addControl(new BMap.MapTypeControl());
          map.setMapStyleV2({
          styleId: 'the style id'})}Copy the code

Results show