更新记录

1.2.1（2024-12-15） 下载此版本

1.新增默认插槽，用于显示地图上的自定义控件或内容； 2.新增fitView属性，用于设置地图是否自适应显示所有覆盖物； 3.解决数据更新后，地图标注可能显示不正确的问题； 4.解决自动定位属性动态改变后，地图自动定位标注没有及时自动更新显示的问题。

1.2.0（2024-12-15） 下载此版本

#

1.1.2（2024-09-17） 下载此版本

性能优化。

平台兼容性

组件功能

在高德地图上显示数据的标注marker和用户当前位置的标注marker。

文档

属性说明

• geo、mapId、scale、toolBar、useJscode、serviceHost和amapKey是地图初始化参数，在地图初始化前传入才会生效，在地图初始化后改变参数值不但不会生效，还可能会导致地图显示错误，因此这些参数应当在此子组件创建时传入。

markers 数组元素属性说明

markers 的每个元素必须是一个对象且有下列属性：

• markers的赋值变化时会自动更新视图显示。

geo 对象属性说明

• geo不为空值时会开启自动定位功能，所以若不想开启自动定位功能则不传值即可
• geo的width属性不为空值时会显示自动定位图标，所以若不想显示自动定位图标则width属性不传值即可

infowindowContent 对象属性说明

• 若infowindowContent传入空值，则地图标注点击后不会显示信息窗体

插槽说明

示例代码

<!-- 高德地图定位标注 Vue3 -->
<template>
  <view class="map-location">
    <lk-amap-location
      amap-key="xxx"
      service-host="http://localhost:8888/"
      :markers="list"
      :scale="mapScale"
      :toolBar="mapToolBar"
      :infowindowContent="infowindow"
      @map-ready="loadData"
      @current-positon="getPosition"
      @open-info-window="openInfoWindow"
      @error="handleError"
    ></lk-amap-location>
  </view>
</template>

<script setup>
  import { ref } from 'vue'

  /* 数据查询 */
  const list = ref([])

  const loadData = () => {
    list.value = Array.from({length: 10}, () => ({
      lng: (Math.random() * (135.083 - 73.55 + 1) + 73.55).toFixed(6), // 随机经度,
      lat: (Math.random() * (53.55 - 3.85 + 1) + 3.85).toFixed(6), // 随机纬度,
      width: 30,
      height: 30,
      anchor: 'bottom-center'
    }))
  }

  /* 获取自动定位信息 */
  const geo = {
    // #ifdef APP-PLUS
    icon: 'static/img/map/position.png',
    // #endif
    // #ifdef H5
    icon: '/static/img/map/position.png',
    // #endif
    width: 20,
    height: 20
  }
  const location = ref({})

  const getPosition = info => location.value = info

  /* 显示地图比例尺控件 */
  const mapScale = ref({})

  /* 显示地图缩放控件 */
  const mapToolBar = ref({})

  /* 打开信息窗体 */
  const infowindow = ref(null)

  const openInfoWindow = index => infowindow.value = `<div class="vehicle_maker_info">编号：${index + 1}</div>`

  /* 获取错误信息 */
  const handleError = err => console.error(err)
</script>

<style lang="scss">
  .map-location {
    height: 100%;
  }
</style>

在线演示

在线演示地址

其他

组件难免有不足之处，欢迎各位老铁们批评指正，有任何问题都可以在评论区中留言。