Vue-amap：高德地圖在Vue中的使用

一、Vue-amap簡介

Vue-amap是一個在Vue.js中集成高德地圖的插件。通過它，我們可以在Vue應用中輕鬆地使用高德地圖提供的功能，比如地圖展示、標記、搜索、導航和定位等。

Vue-amap的使用相對簡單，只需要在Vue應用中引入並初始化即可。在接下來的內容中，我們將更加詳細地闡述Vue-amap的功能和使用方法。

二、Vue-amap marker不展示

在使用Vue-amap的時候，有時候會發現標記（marker）不展示的情況。這時候，需要注意以下幾個問題：

1.地圖是否正確載入。檢查地圖是否正確載入，可以通過查看console是否有報錯以及通過修改地圖的樣式（如設置寬高）來確認是否正確載入。

{
  <el-amap style="width:100%;height:500px;" :options="{zoom: 10}">
    <el-amap-marker :position="[116.39,39.91]" />
  </el-amap>
}

2.marker位置是否正確。檢查marker的經緯度坐標是否正確。比如在上面的示例中，marker的經緯度坐標為[116.39,39.91]。

{
  <el-amap style="width:100%;height:500px;" :options="{zoom: 10}">
    <el-amap-marker :position="[116.39,39.91]" />
  </el-amap>
}

3.地圖是否正確縮放。如果地圖縮放比例過小或過大，marker可能會不顯示。可以通過設置地圖的縮放比例來解決這個問題，比如設置options的zoom值。

{
  <el-amap style="width:100%;height:500px;" :options="{zoom: 10}">
    <el-amap-marker :position="[116.39,39.91]" />
  </el-amap>
}

三、VueAmap自定義繪點選取

Vue-amap提供了自定義繪點（自定義marker）的功能，這使得我們可以在地圖上顯示更加個性化的標記。下面是一個簡單的示例，展示如何使用Vue-amap自定義繪點：

{
  <el-amap style="width:100%;height:500px;" :options="{zoom: 15}">
    <el-amap-marker :position="[116.39,39.91]">
      <template>
        <div class="custom-marker" style="position: absolute;bottom: 0;width: 22px;height: 40px;left: -11px;">
          <img src="./assets/marker.png" alt="" style="width: 100%;height: 100%;" />
        </div>
      </template>
    </el-amap-marker>
  </el-amap>
}

在上面的代碼中，我們創建了一個自定義marker，並將一個圖片作為它的模板。圖片的大小為22px*40px，圖片的底部與地圖經緯度位置對齊。這樣的話，marker的坐標就是圖片的底部坐標。

四、Vue-amap其他功能

除了上面提到的功能之外，Vue-amap還提供了很多其他有用的功能，比如地圖縮放、地圖拖動、地圖搜索、地圖導航和定位等。以下是一個簡單的示例，展示如何使用Vue-amap的地圖縮放功能：

{
  <el-amap style="width:100%;height:500px;" :options="{zoom: 15}">
    </el-amap>
  <el-slider v-model="zoom" :min="3" :max="18"></el-slider>
</div>

在上面的代碼中，我們使用了一個滑塊組件來控制地圖的縮放比例。通過綁定zoom的值，我們可以控制地圖的縮放比例。

以上就是Vue-amap的一些功能和使用方法的介紹。Vue-amap的集成使得我們在Vue應用中更加方便地使用高德地圖的功能，而且使用起來也非常簡單。歡迎大家在實際應用中嘗試使用。