更新记录

1.0.0（2024-04-09）

首个版本发布。

平台兼容性

组件功能

在mapbox地图上显示数据的标注及标注的信息窗体。

文档

安装说明

本组件依赖mapbox地图运行，所以需要先安装 mapbox-gl 库，在终端运行以下指令：

npm install mapbox-gl --save

属性说明

• markerIcon 只支持在线url或base64编码。

markers 数组元素属性说明

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

• markers的赋值变化时会自动更新视图显示。
• icon 只支持在线url或base64编码。

示例代码

<!-- mapbox地图标注+信息窗体 -->
<template>
  <view class="mapbox-location">
    <lk-mapbox-location
      :markers="info"
      :popup="popup"
      marker-icon="base64编码"
      v-if="info.length"
      @open-popup="openPopup"
    ></lk-mapbox-location>
  </view>
</template>

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

  /**
   * 基本信息显示业务
   */
  const info = ref([])

  const loadBasicData = () => {
    info.value = Array.from({length: 10}, () => ({
      lng: (Math.random() * (134.083 - 74.55 + 1) + 74.55).toFixed(6), // 随机经度
      lat: (Math.random() * (52.55 - 4.85 + 1) + 4.85).toFixed(6), // 随机纬度
      icon: 'https://source.unsplash.com/random/?car', // 随机车辆图片
      width: 30,
      height: 30,
      anchor: 'center'
    }))
  }

  loadBasicData()

  /**
   * 设备地图定位业务
   */
  /* 信息窗体业务 */
  const popup = ref(null)

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

<style lang="scss">
  page,
  .mapbox-location {
    height: 100%;
  }
  :deep(.vehicle_maker_info) {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 200rpx;
    color: #333;
    min-height: 100rpx;
    padding: 30rpx 0 20rpx;
    font-weight: bold;
    font-size: 28rpx;
  }
</style>

在线演示

在线演示地址

其他

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