關於vue-baidu-map的一些記錄

20岁的老年人發表於2024-05-22
VueAI

這一階段主要的內容是負責編寫和百度地圖相關的資訊。（寫到我想吐）

仿照導航的頁面效果。

1.使用說明

這裡使用的是vue-baidu-map相關元件，這裡我就不去說明如何去安裝他們了，我們直接向下看。vue-baidu-map的操作手冊的網址：Vue Baidu Map (dafrok.github.io)。當然我這裡介紹的那些只是我所使用的，他們所擁有的的屬性和方法可不止我這裡寫的那麼一點點。

2.地圖容器

<template>
    <!-- center表示的是載入地圖的中心點，zoom則是地圖的縮放等級 -->
  <baidu-map class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="15">
  </baidu-map>
</template>

這裡的center有兩種寫法：

  • :center="{lng: 116.404, lat: 39.915}"

  • center="北京"

這兩種寫法都能夠讓地圖的中心處於北京，但是注意這裡的坑，我初次以為這裡的center是響應式的，實則並不是例如

<!-- 注意下面的寫法有問題，不要這麼寫 -->
<template>
 <baidu-map class="map" :center="myPosition" :zoom="15">
  </baidu-map>
</template>
<script>
export default{
    date(){
        return{
            myPosition:{lng: 116.404, lat: 39.915}
        }
    }
}
</script>

對於平常而言，這樣寫程式碼不是很正常嗎？但是在這裡就不行，（至少我寫的這個專案不行）。這裡我們使用另外一種方式進行改變，就是@ready這個事件，在建立地圖時會觸發這個事件，而這個事件有引數分別是map例項物件，我們可以透過map例項物件來獲取地圖相關屬性，同時可以透過建立BMap類來進行操作。

並且在之後的開發中，我們往往會遇到很多地方需要我們手動修改地圖的默寫屬性，這裡我推薦在data中建立空物件，將map和BMap分別儲存到這兩個物件中去，方便我們日後的操作，例如:

<template>
 <baidu-map @ready="mapReady" class="map" :center="myPosition" :zoom="15">
  </baidu-map>
</template>
<script>
export default{
    date(){
        return{
            map:{},
            BMap:{}
        }
    }
    
    method:{
    mapReady({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
    },}
}
</script>

這麼寫的話也方便我們之後去使用相關的例項物件，當然網上也提供了另外一種寫法，就是透過ref來獲取map的例項物件，但是本人親測還是認為上面的方法更好用一些。

現在我們獲取了map和BMap，我們使用官方提供的方法centerAndZoom將中心點的經緯度和地圖縮放等級的資料傳進去，當然傳入的資料需要進行一些處理

let shrink = 18;
let gps = [116.404,39.915]
let point = new BMap.Point(...gps);
map.centerAndZoom(point, shrink);

將上面程式碼觸發之地圖的中心點就會跳轉到北京的位置，並且設定縮放等級為18.

3.點

他這裡就叫做點，具體的使用方式是這樣的

<!-- position表示的是點的相關位置, rotation表示的是這個點的相關角度，dragging表示這個點能不能拖動，icon表示的是這個點的圖示和樣式，z-index表示的是這個圖示的層級 -->           
<bm-marker
            :position="currentPos"
            :rotation="currentRotation"
            :dragging="false"
            :icon="currentIcon"
            :zIndex="37000001"
          />

和上面的地圖容器不同的是，這裡的點的標籤的相關屬性都是響應式的（這個層級37000001不要管他），我們大可以直接去在data中修改他們的值。

此外這裡的currentIcon是一個物件

currentIcon: {
        url: require("../../assets/images/currentIcon.png"),
        size: {
          width: 36,
          height: 36,
        },

上面的這個是一個例子，我們設定號這個點的背景圖片和尺寸，然後就能夠在地圖中生成相應的點了，當然了，點的html程式碼要寫在baidu-map標籤中。

4.折線

折線使用方法比較複雜，先看他給的程式碼程式碼

<!-- 官方生成折線的方法 --> 
<bm-polyline :path="polylinePath" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" :editing="true" @lineupdate="updatePolylinePath"></bm-polyline>

這裡我放不出來公司的程式碼，因為他是使用BMap物件建立出來的，在他的程式碼中，沒有涉及到這個折線的標籤，為了能解釋明白，我們還是按照標籤的來。

生成線最重要的自然就是點，這個標籤中的path屬性所對應的值是一個陣列，陣列的內容則是一個點的經緯度{lng:currentLng,lat:currentLat}之類的物件，傳入引數之後系統會根據陣列的index順序收尾相連（第一個元素和最後一個元素不連線）畫出線段。

這裡再說一個屬性icons，當我們設定出來的線段上想要加上一些圖示的時候，將圖示的資訊封裝成陣列傳遞進去如下面diamante所示

   var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
        scale: 0.3, //圖示縮放大小
        strokeColor: "#fff", //設定向量圖示的線填充顏色
        strokeWeight: "1", //設定線寬
        fillOpacity: 0.8,
      });
      var icons = new BMap.IconSequence(sy, "30px", "10%");
      this.icons.push(icons);

他這裡設定的是向量圖示就是地圖上畫出路徑之後，路徑上面的箭頭。

其他剩餘的屬性其實在文件上也可以檢視到。

5.自定義覆蓋物

由於官方本身提供的資訊窗體實在是不怎麼美觀於是我們自己做資訊窗體，這裡用到了自定義覆蓋物（遇到的最燒腦的一個標籤）

<baidu-map class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="15">
  <bm-overlay
    pane="labelPane"
    :class="{sample: true, active}"
    @draw="draw"
    @mouseover.native="active = true"
    @mouseleave.native="active = false">
    <div>我愛北京天安門</div>
  </bm-overlay>
</baidu-map>
​
<script>
export default {
  data () {
    return {
      active: false
    }
  },
  methods: {
    draw ({el, BMap, map}) {
      const pixel = map.pointToOverlayPixel(new BMap.Point(116.404, 39.915))
      el.style.left = pixel.x - 60 + 'px'
      el.style.top = pixel.y - 20 + 'px'
    }
  }
}
</script>
​
<style>
.sample {
  width: 120px;
  height: 40px;
  line-height: 40px;
  background: rgba(0,0,0,0.5);
  overflow: hidden;
  box-shadow: 0 0 5px #000;
  color: #fff;
  text-align: center;
  padding: 10px;
  position: absolute;
}
.sample.active {
  background: rgba(0,0,0,0.75);
  color: #fff;
}
</style>

首先我這裡說一下關於這個標籤的位置如何確定，我們不看他封裝後的程式碼，就看單獨使用這個標籤，它本身是沒有控制位置的屬性的，那麼怎樣才能讓這個標籤跟隨汽車的變化而變化呢？是使這個標籤本身所提供的draw這個事件中的來確定覆蓋物在地圖中的位置，然後就是css，這裡一定要注意給標籤設定絕對定位，這樣才能讓標籤在地圖顯示在想要的位置。

然而上述程式碼完成之後我們發現這個覆蓋物在地圖中的位置是定死的，假如我現在在寫導航，小車的位置發生改變，怎麼讓這個覆蓋物的位置也發生改變呢？

    draw({ el, BMap, map }) {
      const { lng, lat } = this.currentPos;
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat));
      el.style.left = pixel.x - 170 + "px";
      el.style.top = pixel.y - 140 + "px";
    },

首先讓我們先獲取這個動點，隨後，當我們的點發生變化之後執行

this.$refs.customOverlay.reload();重新載入覆蓋物，就能夠讓覆蓋物動起來了。

最後如果想要修改覆蓋物的樣式直接在這個標籤裡寫div就可以了。

6.標籤

看程式碼

<bm-label content="我愛北京天安門" :position="{lng: 116.404, lat: 39.915}" :labelStyle="{color: 'red', fontSize : '24px'}" title="Hover me"/>

這個標籤的難度就不是很大了，label本身自帶position屬性，當然也是不能動態修改位置的，但是它相對好的點是，可以寫在其他能動的標籤中，跟隨其他元素在地圖中移動。

那麼既然解決了動的問題，剩下的就是樣式的解決了，他自己本身的樣式都是寫在style裡的，所以改起來，改加v-deep，還是！important閣下就慢慢試吧。

總結：

本次真的是寫吐了，各種各樣的問題和層出不窮的，個人認為他的元件不是響應式的就是最大的敗筆，本人屬於急性子，再加上粗心大意，在編寫的時候一度將訊飛星火問到需要載入10幾秒的情況。

相關文章