vue中引入百度地圖：一個小白的vue插件探索之路

1. 相關(guān)文檔和工具

百度地圖插件地址（插件文檔在github項目代碼里霉猛，可下載下來運行項目閱讀）
百度地圖 javascript API（插件的文檔有些并未解釋完全屋灌，需要結(jié)合官方API文檔閱讀）
密鑰申請（必須要申請開發(fā)者密鑰才可以使用百度地圖）
坐標(biāo)拾取器（用來獲取地圖上點的經(jīng)緯度）

2.引入

效果圖

步驟：

注冊組件
初始化地圖
添加縮放控件
添加地圖類型控件
添加點
添加線
添加信息窗體
添加外部浮層

2.1 安裝注冊組件

安裝組件

$ npm install vue-baidu-map --save

注冊組件

<template>
 // ak 是在百度地圖開發(fā)者平臺申請的密鑰 詳見 http://lbsyun.baidu.com/apiconsole/key */
  <baidu-map class="bm-view" ak="YOUR_APP_KEY">
  </baidu-map>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
  components: {
    BaiduMap
  }
}
</script>

<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>

可全局注冊，也可局部注冊，因為我只有一個頁面用到地圖煤搜，所以采用局部注冊

2.2 初始化地圖

<template>
  <baidu-map id="baidumap" class="map" ak="KbGbuk~~~BWmEjf"   
               :center="map.center"
               :zoom="map.zoom"
               :scroll-wheel-zoom="map.scroll">
   </baidu-map>
</template>
<script>
 import BaiduMap from 'vue-baidu-map/components/map/Map.vue'//用什么引入什么就好，路徑在下載的github項目中可以看到
 export default {
        name: "Map",
        components: {
            BaiduMap
        }, 
        data() {
            return {
                map: {
                    center: {lng: 112.127671, lat: 32.015287},//'襄陽市',地圖的中心點坐標(biāo)
                    zoom: 15,//1-18徙鱼，數(shù)值越大離地面越近宅楞，地圖實際面積越小
                    scroll: true //支持滾動鼠標(biāo)縮放
                }
          }
      }
}
</script>
<style lang="stylus" scoped>
    .map
        width auto
        height 750px //寬高一定要設(shè)置
        margin 0 20px 20px 20px
</style>

2.3 添加縮放控件

<template>
  <baidu-map id="baidumap" class="map" ak="KbGbuk~~~BWmEjf"   
               :center="map.center"
               :zoom="map.zoom"
               :scroll-wheel-zoom="map.scroll">
       <!-- 縮放控件，所有地圖的組件都要寫在 baidu-map組件內(nèi)-->
       <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
   </baidu-map>
</template>
<script>
 import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
 import BmNavigation from 'vue-baidu-map/components/controls/Navigation.vue'//引入縮放控件
 export default {
        name: "Map",
        components: {
            BaiduMap, BmNavigation//注冊組件
        }, 
      ...
}
</script>

關(guān)于anchor屬性袱吆，插件文檔中的說明是

但文檔中并未說明ControlAnchor類型是什么厌衙，此時要用到百度地圖 javascript API，找到官方文檔解釋：

后面的操作就同理啦绞绒，插件文檔中沒有詳細(xì)說明的東西都可以去官方API文檔中查找婶希，畢竟插件也是在官方j(luò)s的基礎(chǔ)上寫的嘛（我真厲害哈哈O(∩_∩)O）

2.4 添加地圖類型控件

<template>
  <baidu-map id="baidumap" class="map" ak="KbGbuk~~~BWmEjf"   
               :center="map.center"
               :zoom="map.zoom"
               :scroll-wheel-zoom="map.scroll">
      <!-- 地圖類型控件 -->
       <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type>
   </baidu-map>
</template>
<script>
 import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
 import BmMapType from 'vue-baidu-map/components/controls/MapType.vue'//類型組件
 export default {
        name: "Map",
        components: {
            BaiduMap,  BmMapType//注冊
        }, 
       ...
}
</script>

同理，找到官方文檔百度地圖 javascript API蓬衡，設(shè)置地圖類型：

2.5 添加點

<template>
  <baidu-map id="baidumap" class="map" ak="KbGbuk~~~BWmEjf"   
               :center="map.center"
               :zoom="map.zoom"
               :scroll-wheel-zoom="map.scroll">
      <!-- 各設(shè)備在地圖上顯示  -->
      <!-- 循環(huán)輸出點喻杈，key值一定要設(shè)置全局唯一的，不要用數(shù)組下標(biāo)狰晚；如果只顯示一個點就去掉循環(huán)-->
      <!-- 可以自定義圖標(biāo)  -->
      <!-- 設(shè)置點擊事件筒饰，點擊后打開信息窗體  -->
       <bm-marker v-for="item of deviceInfo.devicelist" :key="item._id" :position="{lng: item.lng, lat: item.lat}"
                   :icon="{url: 'https://gitee.com/hyflu4/imgs/raw/master/baidu-map-icons/ren.png', size: {width: 48, height: 32}}"
                   @click="infoWindowOpen(item,1)"
        >
        </bm-marker>
   </baidu-map>
</template>
<script>
 import BaiduMap from 'vue-baidu-map/components/map/Map.vue'//用什么引入什么就好，路徑在下載的github項目中可以看到
import BmMarker from 'vue-baidu-map/components/overlays/Marker.vue'
 export default {
        name: "Map",
        components: {
            BaiduMap,  BmMarker
        }, 
        props: ['deviceInfo'],
       ...
}
</script>

這里是循環(huán)輸出多個點壁晒，直接在marker組件上使用v-for瓷们，不需要加div來循環(huán)（來自一個小白走過的坑...）

2.6 添加線

<template>
  <baidu-map id="baidumap" class="map" ak="KbGbuk~~~BWmEjf"   
               :center="map.center"
               :zoom="map.zoom"
               :scroll-wheel-zoom="map.scroll">
      <!-- 輸出所有的點  -->
       <bm-marker v-for="item of towers" :key="item._id" :position="{lng: item.lng, lat: item.lat}"
                   :icon="{url: 'https://gitee.com/hyflu4/imgs/raw/master/baidu-map-icons/meishi.png', size: {width: 32, height: 32}}"
                   @click="infoWindowOpen(item,2)"
        >
        </bm-marker>
        <!-- 一條線，只需要path中給出組成線的點坐標(biāo)數(shù)組  -->
        <!-- 多條線秒咐，即一個二維數(shù)組谬晕，需要用到v-for  -->
        <bm-polyline v-for="(item,key) of towerLines" :key="key" :path="item" stroke-color="red" 
                  :stroke-opacity="1"   :stroke-weight="3">
        </bm-polyline>
   </baidu-map>
</template>
<script>
 import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmMarker from 'vue-baidu-map/components/overlays/Marker.vue'
import BmPolyline from 'vue-baidu-map/components/overlays/Polyline.vue'
 export default {
        name: "Map",
        components: {
            BaiduMap,  BmMarker，BmPolyline
        }, 
        props: ['deviceInfo', 'towerlineInfo'],
        data() {
            return {
                map: {
                    center: {lng: 112.127671, lat: 32.015287},//'襄陽市',地圖的中心點坐標(biāo)
                    zoom: 15,//1-18携取，數(shù)值越大離地面越近攒钳，地圖實際面積越小
                    scroll: true //支持滾動鼠標(biāo)縮放
                },
                towerLines: [],
                towers: []
          }
        }
}
</script>

線是由多個點組成的，因此只要給出點的數(shù)組就能畫出線啦~
線和點是分開的雷滋，當(dāng)需要既顯示點不撑，又顯示點連成的線時，還是需要分成點和線
這里給出線的數(shù)據(jù)結(jié)構(gòu)以供參考：

towerLines:[
  [{lng:'12.12',lat:'13.13'},{lng:'13.13',lat:'14.14'},{lng:'14.14',lat:'15.15}],//第一條線
  [{lng:'12.12',lat:'13.13'},{lng:'13.13',lat:'14.14'},{lng:'14.14',lat:'15.15}],//第二條線
]

2.7 添加信息窗體

<template>
    <baidu-map id="baidumap" class="map" ak="KbGbuknrQ3M9Ms9uwb260MpQAdBWmEjf"
               :center="map.center"
               :zoom="map.zoom"
               :scroll-wheel-zoom="map.scroll"
    >
        <bm-info-window :show="infoWindow.show" :position="infoWindow.position"
                        class="info-window"
                        @open="infoWindowOpen"
                        @close="infoWindowClose">
            <!--此處是自定義窗體內(nèi)容惊豺，你也可以用{{}}的方式直接輸出內(nèi)容-->
            <div class="info-Window-name">{{infoWindow.title}}</div>
            <div v-for="(item,key) of infoWindow.contents" :key="key">{{item}}</div>
        </bm-info-window>
    </baidu-map>
</template>
<script>
    import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
    import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow.vue'
    export default {
        name: "Map",
        components: {
            BaiduMap,BmInfoWindow
        },
        props: ['deviceInfo', 'towerlineInfo'],
        data() {
            return {
                map: {
                    center: {lng: 112.127671, lat: 32.015287},//'襄陽市',
                    zoom: 15,//1-18
                    scroll: true
                },
                infoWindow: {
                    show: false,
                    position: {},
                    title: '',
                    contents: []
                },
            }
        },

        methods: {
            clickDevice(data) {
                this.infoWindow.position = {lng: data.lng, lat: data.lat}
                this.infoWindow.title = data.devicename
                this.infoWindow.contents = []
                this.infoWindow.contents.push(
                    '等級：' + data.elecstrength,
                    '狀態(tài)：' + (data.isarmclose ? '已抵達(dá)' : '已離開'),
                    '經(jīng)度：' + data.lng,
                    '緯度：' + data.lat   
                )
            },
            clickTower(data) {
                this.infoWindow.position = {lng: data.lng, lat: data.lat}
                this.infoWindow.title = data.towername
                this.infoWindow.contents = []
                this.infoWindow.contents.push(
                    '線路名稱：' + data.linename,
                    '線路等級：' + data.vlevel,
                    '經(jīng)度：' + data.lng,
                    '緯度：' + data.lat
                )
            },
            infoWindowClose() {
                this.infoWindow.show = false
            },
          //type不同燎孟，初始化數(shù)據(jù)的方法不同
            infoWindowOpen(data,type) {
                this.infoWindow.show = true
                switch (type) {
                    case 1:
                        this.clickDevice(data)
                        break
                    case 2:
                        this.clickTower(data)
                        break
                }
            },
        },
    }
</script>

<style lang="stylus" scoped>
    .map
        width auto
        height 750px
        margin 0 20px 20px 20px
        position relative
        .info-window
            font-size 12px
            .info-Window-name
                font-weight bold
                text-align center
</style>

tips：此處有兩種類型的點，但我使用了同一個窗體顯示數(shù)據(jù)尸昧，因為在使用兩個窗體顯示數(shù)據(jù)時揩页，兩個窗體在切換時必須要先關(guān)掉上個窗體才能打開下個窗體，體驗不太好

2.8 添加外部浮層

<baidu-map id="baidumap" class="map" ak="KbGbuk~~~BWmEjf"   
               :center="map.center"
               :zoom="map.zoom"
               :scroll-wheel-zoom="map.scroll">
        <div class="sum-message">
            當(dāng)前人數(shù)<span class="sum-message-num" style="color:#66b1ff;">{{deviceInfo.totalnum}}</span>個，
            在線人數(shù)<span class="sum-message-num" style="color:#00a84b;" >{{deviceInfo.onlinenum}}</span>個爆侣，
            離線人數(shù)<span class="sum-message-num" style="color:#cdcdcd;">{{deviceInfo.offlinenum}}</span>個萍程，
            礦工人數(shù)<span class="sum-message-num" style="color:#d81e06;">{{deviceInfo.warmnum}}</span>個
        </div>
 </baidu-map>
<style lang="stylus" scoped>
    .map
        width auto
        height 750px //寬高一定要設(shè)置
        margin 0 20px 20px 20px
        position relative
         .sum-message
            position absolute
            left 50%
            top 0
            transform translateX(-50%);
            z-index 1
            background-color rgba(255, 255, 255, 0.8)
            border-radius 8px
            padding 0 10px
            width auto
            height 40px
            line-height 40px
            .sum-message-num
                font-size 18px
                padding 0 3px
                font-weight bold
</style>

讓浮層可以居中顯示的關(guān)鍵代碼：

    .map
        position relative
         .sum-message
              position absolute
              left 50%
              top 0
              transform translateX(-50%);

3 心得

雖然自己已經(jīng)用過第三方插件，比如element-ui和swiper兔仰，但是都是按照別人的文章指引茫负，總是糊里糊涂的在用，仿佛插件是個很神秘的東西乎赴。
這次忍法，通過百度地圖插件的引入過程，我終于揭開了插件這個神秘的面紗榕吼，我看到了源碼饿序、文檔，雖然沒有看太懂羹蚣，但是也讓我不再“畏懼”插件原探，至少讓我懂得：vue的插件也就是用vue寫的一些組件罷了！