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应用中更加方便地使用高德地图的功能，而且使用起来也非常简单。欢迎大家在实际应用中尝试使用。