uniapp-Map地图之打标点与使用

在uniapp开发中，会涉及到定位方面的需求，比如查询用户附近的门店，在餐饮与外卖应用中广泛存在，今天就来记录一下uniapp中map组件的使用与打标点

1.初始化map

    <map
      id="map"
      :latitude="latitude"
      :longitude="longitude"
      :scale="13"
      :markers="markers"
      :show-location="true"
      style="width: 100%; height: 400rpx"
      >
    </map>

latitude/longitude为用户当前所在定位，用来标记用户当前地理位置，如图

scale为地图缩放比例，值越大地图越详细

markers为标点集合

具体说明见官方文档map | uni-app-x

2.打标点

注意：id只能唯一，若重复会出现标点不全或只显示一个等问题

 iconPath为自定义标点图标，只能是相对路径/static这种模式，不能是绝对路径../static

      // 将门店数据转换为 markers 数组
        this.markers = rel.data.map((store) => ({
          id: store.storeCode, // 确保 id 是数字
          latitude: parseFloat(store.lat), // 确保 latitude 是数字
          longitude: parseFloat(store.lng), // 确保 longitude 是数字
          title: store.name,
          iconPath: "/static/orderingMeals/location.png",
          width: 30,
          height: 30,
        }));