更新记录

1.0.1（2024-04-09）

解决由于坐标系不匹配的导致定位不准的问题。

1.0.0（2023-11-14）

首个版本发布。

平台兼容性

组件功能

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

文档

属性说明

markers 数组元素属性说明

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

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

geo 对象属性说明

示例代码

<!-- 高德地图定位标注 -->
<template>
  <view class="map-location">
    <lk-amap-location
      amap-key="daa29f45bd22dab89187ec700409d1ed"
      service-host="http://localhost:8888/"
      :markers="list"
      @current-positon="getPosition"
    ></lk-amap-location>
  </view>
</template>

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

  const list = ref([])
  const location = ref({})
  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 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), // 随机纬度,
      icon: 'https://source.unsplash.com/random/?car', // 随机车辆图片
      width: 30,
      height: 30,
      anchor: 'bottom-center'
    }))
  }

  loadData()

  const getPosition = info => location.value = info
</script>

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

在线演示

在线演示地址

其他

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