【报Bug】uniapp map真机高德地图marker使用网络地图，图片不展示

更新：目前 map 地图的 markder 不支持网络图片，文档标记不支持。只支持本地图片。web 平台无此限制。

使用普通图片，比如 https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/logo.png 测试一下，网络图片避免使用三方图片，有可能因为 referer 差异。

你本地调试是否正常？

以下是我的页面代码

<template>  
  <view class="homeBody">  
    <view class="tabs">  
      <view class="tabs-container">  
        <!-- 顶部 tabs 区 -->  
        <!-- <scroll-view class="tabs-header" scroll-x="true" show-scrollbar="false">  
          <view class="tabListBox">  
            <view class="tabList align-center width-noPadding">  
              <view  
                class="tab-item"  
                :class="{ active: activeTab === tab.menu_url }"  
                v-for="(tab, index) in tabsList"  
                :key="index"  
                @click="activeTab = tab.menu_url"  
              >  
                <text>{{ tab.menu_name }}</text>  
                <image  
                  src="@/static/images/home/subscript.png"  
                  mode=""  
                  class="subscriptImg"  
                ></image>  
              </view>  
            </view>  
          </view>  
        </scroll-view> -->  

        <!-- 内容区 -->  
        <view class="tabs-content">  
          <!-- 加载中提示 -->  
          <view v-if="loading" class="loadingWrapper">  
            <text>加载中...</text>  
          </view>  
          <view v-else>  
            <view v-if="activeTab == 0" class="dynamicBox">  
              <z-paging  
                ref="paging1"  
                v-model="dynamicList"  
                @query="queryList1"  
                :hide-empty-view="true"  
              >  
                <template #top>  
                  <scroll-view  
                    class="tabs-header"  
                    scroll-x="true"  
                    show-scrollbar="false"  
                  >  
                    <view class="tabListBox">  
                      <view class="tabList align-center width-noPadding">  
                        <view  
                          class="tab-item"  
                          :class="{ active: activeTab === tab.menu_url }"  
                          v-for="(tab, index) in tabsList"  
                          :key="index"  
                          @click="activeTab = tab.menu_url"  
                        >  
                          <text>{{ tab.menu_name }}</text>  
                          <image  
                            src="@/static/images/home/subscript.png"  
                            mode=""  
                            class="subscriptImg"  
                          ></image>  
                        </view>  
                      </view>  
                    </view>  
                  </scroll-view>  
                  <view  
                    class="searchBox"  
                    @click="$u.route('pagesB/my/searchAll')"  
                  >  
                    <image  
                      src="@/static/images/home/search.png"  
                      class="searchImg"  
                      mode=""  
                    >  
                    </image>  
                    <view class="seachText">搜索帖子/用户ID</view>  
                  </view>  
                </template>  
                <NearbyUpdates  
                  @updateZanFlag="updateLikeHandler"  
                  @updateList="updateListFun"  
                  :list="dynamicList"  
                  @loadMore="loadMore"  
                ></NearbyUpdates>  
              </z-paging>  
              <view  
                class="releaseBtnBox"  
                @click="$u.route('pagesC/release/releaseArea')"  
              >  
                <image  
                  src="@/static/images/home/release.png"  
                  class="releaseImg"  
                  mode=""  
                ></image>  
              </view>  
            </view>  
            <view v-if="activeTab == 1" class="peopleNearbyBox">  
              <z-paging  
                ref="paging2"  
                v-model="userList"  
                @query="queryList2"  
                :hide-empty-view="true"  
              >  
                <template #top>  
                  <scroll-view  
                    class="tabs-header"  
                    scroll-x="true"  
                    show-scrollbar="false"  
                  >  
                    <view class="tabListBox">  
                      <view class="tabList align-center width-noPadding">  
                        <view  
                          class="tab-item"  
                          :class="{ active: activeTab === tab.menu_url }"  
                          v-for="(tab, index) in tabsList"  
                          :key="index"  
                          @click="activeTab = tab.menu_url"  
                        >  
                          <text>{{ tab.menu_name }}</text>  
                          <image  
                            src="@/static/images/home/subscript.png"  
                            mode=""  
                            class="subscriptImg"  
                          ></image>  
                        </view>  
                      </view>  
                    </view>  
                  </scroll-view>  
                  <view style="height: 60px"></view>  
                </template>  
                <PeopleNearby :list="userList"></PeopleNearby>  
              </z-paging>  
            </view>  
            <view v-if="activeTab == 2">  
              <scroll-view  
                class="tabs-header"  
                scroll-x="true"  
                show-scrollbar="false"  
              >  
                <view class="tabListBox">  
                  <view class="tabList align-center width-noPadding">  
                    <view  
                      class="tab-item"  
                      :class="{ active: activeTab === tab.menu_url }"  
                      v-for="(tab, index) in tabsList"  
                      :key="index"  
                      @click="activeTab = tab.menu_url"  
                    >  
                      <text>{{ tab.menu_name }}</text>  
                      <image  
                        src="@/static/images/home/subscript.png"  
                        mode=""  
                        class="subscriptImg"  
                      ></image>  
                    </view>  
                  </view>  
                </view>  
              </scroll-view>  
              <!-- 地图容器 -->  
              <map  
                id="amap"  
                :longitude="longitude"  
                :latitude="latitude"  
                :scale="scale"  
                :markers="markers"  
                @markertap="onMarkerClick"  
                :controls="controls"  
                style="width: 100vw; margin-top: 18px"  
                :style="{ height: mapHeight }"  
                show-location  
                @controltap="toggleMapView"  
                @tap="mapClick"  
                @regionchange="handleRegionChange"  
              ></map>  
              <view v-if="showBottomInfo" class="map-bottom-box">  
                <view class="bottom-item">  
                  <text class="label">当前位置：</text>  
                  <text class="value">{{ address || "定位中..." }}</text>  
                  <image  
                    src="@/static/images/home/dingwei.png"  
                    mode=""  
                    class="dwImg"  
                    @click="dwClick"  
                  ></image>  
                </view>  

                <!-- <view class="bottom-item" @click="checkNearFriends">  
                  <text class="label">查看附近好友</text>  
                  <image  
                    src="@/static/images/home/go.png"  
                    mode=""  
                    class="dhImg"  
                  ></image>  
                </view> -->  
                <view class="bottom-item">  
                  <text class="label">定位</text>  
                  <image  
                    src="@/static/images/home/positioning2.png"  
                    mode=""  
                    class="dw2Img"  
                    @click="dw2Click"  
                  ></image>  
                </view>  
                <view class="bottom-item">  
                  <text class="label">共享位置</text>  
                  <switch  
                    :checked="shareLocation"  
                    color="#F2681D"  
                    @change="toggleShareLocation"  
                  />  
                </view>  
              </view>  
            </view>  
            <view v-if="activeTab == 3">  
              <scroll-view  
                class="tabs-header"  
                scroll-x="true"  
                show-scrollbar="false"  
              >  
                <view class="tabListBox">  
                  <view class="tabList align-center width-noPadding">  
                    <view  
                      class="tab-item"  
                      :class="{ active: activeTab === tab.menu_url }"  
                      v-for="(tab, index) in tabsList"  
                      :key="index"  
                      @click="activeTab = tab.menu_url"  
                    >  
                      <text>{{ tab.menu_name }}</text>  
                      <image  
                        src="@/static/images/home/subscript.png"  
                        mode=""  
                        class="subscriptImg"  
                      ></image>  
                    </view>  
                  </view>  
                </view>  
              </scroll-view>  
            </view>  
          </view>  
        </view>  
      </view>  
    </view>  
    <tabbar @tab-dblclick="onTabChange" />  
  </view>  
</template>  

<script>  
import Tabbar from "@/components/Tabbar.vue";  
import TabsComplex from "@/components/tabsComplex.vue";  
import NearbyUpdates from "./component/nearbyUpdates.vue";  
import PeopleNearby from "./component/peopleNearby.vue";  
export default {  
  data() {  
    return {  
      tabsList: ["附近动态", "附近的人", "地图定位"],  
      activeTab: 0,  
      // 动态分页  
      dynamicPage: 1,  
      dynamicList: [],  
      dynamicFinished: false,  

      // 用户分页  
      userPage: 1,  
      userList: [],  
      userFinished: false,  
      //地图  
      longitude: 116.397428, // 默认经度  
      latitude: 39.90923, // 默认纬度  
      scale: 14,  
      markers: [],  
      includePoints: [],  
      mapCtx: null, // map 上下文  
      // 控件按钮  
      controls: [],  
      longitude: "", //经度  
      latitude: "", //纬度  
      address: "", //当前所在地  
      loading: true, // 添加加载状态  
      mapExpanded: false, // 是否展开地图（默认不展开）  
      mapHeight: "82vh", // 地图默认高度  
      showBottomInfo: false, // 是否显示底部信息区域  
      shareLocation: false, // 是否开启共享位置  
      systemInfo: "",  
      ydlatitude: "", //地图移动后的中心点坐标  
      ydlongitude: "",  
    };  
  },  
  components: {  
    Tabbar,  
    TabsComplex,  
    NearbyUpdates,  
    PeopleNearby,  
  },  
  computed: {},  
  onLoad(option) {  
    if (option) {  
    }  
    uni.hideTabBar();  
    // 初始化动态  
    this.dynamicPage = 1;  
    this.dynamicList = [];  
    this.dynamicFinished = false;  
    this.getDynamicList();  
    this.getMenuListFun();  
    // 更新地理信息  
    const token = uni.getStorageSync("token");  
    if (token) {  
      // 初始化用户  
      this.userPage = 1;  
      this.userList = [];  
      this.userFinished = false;  
      this.getUserList();  
      this.editUserAreaFun();  
    }  
    this.systemInfo = uni.getSystemInfoSync();  
    // 动态更新 controls 的定位  
    this.updateControlsPosition();  
  },  
  onShow() {  
    const storedParams = uni.getStorageSync("tabPageParams");  
    if (storedParams) {  
      this.updateLikeHandler(storedParams);  
    }  
  },  
  onHide() {},  
  onPageScroll(e) {},  

  onReady() {  
    // 获取 map 上下文  
    this.mapCtx = uni.createMapContext("amap", this);  
  },  
  methods: {  
    //双击tab  
    onTabChange({ index, path }) {  
      // 下拉刷新，设置加载状态为 true  
      this.loading = true;  
      // 初始化动态  
      this.dynamicPage = 1;  
      this.dynamicList = [];  
      this.dynamicFinished = false;  
      this.queryList1(1);  
      // 初始化用户  
      this.userPage = 1;  
      this.userList = [];  
      this.userFinished = false;  
      this.queryList2(1);  
    },  
    // 更新加载状态  
    setLoadingState(state) {  
      this.loading = state;  
      if (state) {  
        uni.showLoading({  
          title: "加载中...",  
        });  
      } else {  
        uni.hideLoading();  
      }  
    },  
    //获取顶部菜单栏  
    getMenuListFun() {  
      this.$http  
        .getMenuList({  
          navId: 5,  
        })  
        .then((res) => {  
          if (res.status == 200) {  
            this.tabsList = res.data.menu_list;  
            this.activeTab = this.tabsList[0].menu_url;  
          }  
        })  
        .catch(() => {});  
    },  
    updateControlsPosition() {  
      // 动态更新 controls 中控件的位置信息  
      this.controls = [  
        {  
          id: 1,  
          iconPath: "/static/images/home/map.png", // 图标  
          position: {  
            top: this.systemInfo.screenHeight - 290, // 根据屏幕调节  
            left: this.systemInfo.screenWidth - 70, // 使用获取到的屏幕宽度  
            width: 50,  
            height: 50,  
          },  
          clickable: true,  
        },  
      ];  
    },  
    //更新评论数量  
    updateListFun(payload) {  
      const { id, comment } = payload;  
      const target = this.dynamicList.find((item) => item.id === id);  
      if (target) {  
        target.comment = comment;  
      }  
    },  
    //点赞更新该条数据  
    updateLikeHandler(payload) {  
      const { id, zanFlag } = payload;  
      const target = this.dynamicList.find((item) => item.id === id);  
      if (target) {  
        target.zanFlag = zanFlag;  
        if (zanFlag) {  
          target.zan = (target.zan || 0) + 1;  
        } else {  
          target.zan = (target.zan || 0) - 1;  
        }  
      }  
      uni.removeStorageSync("tabPageParams");  
    },  
    handleRegionChange(e) {  
      console.log("e", e);  
      if (e.type === "end") {  
        this.getMapCenter();  
      }  
    },  
    getMapCenter() {  
      // 使用 uni.createMapContext 获取地图上下文  
      const mapContext = uni.createMapContext("amap", this); // 'map' 是地图组件的 id  
      mapContext.getCenterLocation({  
        success: (res) => {  
          console.log("中心点经纬度:", res.latitude, res.longitude);  
          this.ydlatitude = res.latitude;  
          this.ydlongitude = res.longitude;  
        },  
      });  
    },  
    //将地图定位到自己位置2  
    dwClick() {  
      // 将地图中心定位到自己  
      this.mapCtx.moveToLocation({  
        longitude: this.longitude,  
        latitude: this.latitude,  
      });  
    },  
    async fetchUsersFromAPI2() {  
      try {  
        const res = await this.$http.nearMapUser({  
          page: 1,  
          limit: 200,  
          longitude: this.ydlongitude,  
          latitude: this.ydlatitude,  
        });  
        console.log("res", res);  
        if (res.status === 200) {  
          return res.data.map((item) => ({  
            id: item.id,  
            lon: item.longitude,  
            lat: item.latitude,  
            avatar: item.headimgurl || "",  
            name: item.user_name,  
          }));  
        }  
      } catch (err) {  
        console.error("请求失败", err);  
      }  
      return [];  
    },  
    // 加载用户位置到地图（接口数据+手动缩放）  
    async loadUsersLocation2() {  
      try {  
        const users = await this.fetchUsersFromAPI2();  
        console.log("users", users);  
        if (!users.length) {  
          uni.showToast({ title: "暂无共享位置", icon: "none" });  
          this.markers = [];  
          return;  
        }  

        // markers  
        this.markers = users.map((u) => ({  
          id: u.id,  
          longitude: u.lon,  
          latitude: u.lat,  
          width: 40,  
          height: 40,  
          iconPath: u.avatar,  
          label: {  
            content: u.name,  
            fontSize: 12,  
            color: "#333",  
            anchorX: -42,  
            anchorY: -56,  
          },  
        }));  
        this.includePoints = users.map((u) => ({  
          longitude: u.lon,  
          latitude: u.lat,  
        }));  

        await this.$nextTick();  

        if (this.includePoints.length === 1) {  
          // 单点，直接设置中心  
          this.longitude = this.includePoints[0].longitude;  
          this.latitude = this.includePoints[0].latitude;  
          this.scale = 14;  
        } else {  
          // 多点，手动计算中心和缩放  
          const center = this.getCenter(this.includePoints);  
          this.longitude = center.longitude;  
          this.latitude = center.latitude;  
          this.scale = this.getScale(this.includePoints);  
        }  
      } catch (e) {  
        console.error("加载共享位置失败", e);  
        uni.showToast({ title: "加载共享位置失败", icon: "none" });  
      }  
    },  
    //以当前地图的中心点定位获取附近的人  
    dw2Click() {  
      this.loadUsersLocation2();  
    },  
    //更新用户经纬度信息  
    async editUserAreaFun() {  
      try {  
        // 获取经纬度  
        const res = await new Promise((resolve, reject) => {  
          uni.getLocation({  
            type: "wgs84",  
            success: resolve,  
            fail: reject,  
          });  
        });  

        const { longitude, latitude } = res;  
        this.longitude = longitude;  
        this.latitude = latitude;  

        // 请求高德API获取地址  
        const key = "xxx";  
        const url = `https://restapi.amap.com/v3/geocode/regeo?output=json&location=${longitude},${latitude}&key=${key}`;  
        const [err, response] = await uni.request({ url });  
        if (err) throw err;  

        if (response.data.status === "1") {  
          this.address = response.data.regeocode.formatted_address;  
          if (this.address) {  
            // 更新后台的用户地理信息  
            const result = await this.$http.editUserArea({  
              page: this.dynamicPage,  
              search_type: 1,  
              area: this.address,  
              longitude: this.longitude,  
              latitude: this.latitude,  
            });  
            if (result.status === 200) {  
              return true; // 表示成功  
            }  
          }  
        }  
      } catch (e) {  
        // this.$toast("请检查定位是否开启应用是否授权");  
        console.error("获取位置或更新地理信息失败:", e);  
        return false;  
      }  
    },  
    queryList1(pageNo, pageSize) {  
      // 根据 tab 的索引来请求不同的数据  
      const params = {  
        page: pageNo,  
        search_type: 1,  
      };  
      console.log("1111");  
      this.$http  
        .getNearDyna(params)  
        .then((res) => {  
          console.log("2222");  
          let list = res.data || [];  
          list = list.map((item) => ({ ...item, isExpanded: false }));  
          console.log("1122", list);  
          this.$refs.paging1.complete(list);  
        })  
        .catch(() => {  
          this.$refs.paging1.complete(false);  
        });  
    },  
    queryList2(pageNo, pageSize) {  
      // 根据 tab 的索引来请求不同的数据  
      const params = {  
        page: pageNo,  
      };  
      console.log("1111");  

      if (this.userFinished) return;  
      this.$http.getNearUser(params).then((res) => {  
        if (res.status == 200) {  
          const list = res.data || [];  
          if (list.length === 0) {  
            this.userFinished = true;  
            return;  
          }  
          this.userList = [...this.userList, ...list];  
          this.$refs.paging2.complete(list);  
        }  
      });  
    },  
    //获取附近动态数据  
    getDynamicList() {  
      if (this.dynamicFinished) return;  
      this.$http  
        .getNearDyna({  
          page: this.dynamicPage,  
          search_type: 1,  
        })  
        .then((res) => {  
          if (res.status == 200) {  
            this.setLoadingState(false); // 数据加载完后，隐藏loading  
            const list = res.data || [];  
            if (list.length === 0) {  
              this.dynamicFinished = true;  
              return;  
            }  
            // this.dynamicList = [...this.dynamicList, ...list];  
            this.dynamicList = [  
              ...this.dynamicList,  
              ...list.map((item) => ({ ...item, isExpanded: false })),  
            ];  
            console.log("this.dynamicList", this.dynamicList);  
          }  
        })  
        .catch(() => {  
          this.setLoadingState(false); // 如果请求失败，也要隐藏loading  
        });  
    },  
    //获取附近用户  
    getUserList() {  
      if (this.userFinished) return;  
      this.$http  
        .getNearUser({  
          page: this.userPage,  
        })  
        .then((res) => {  
          if (res.status == 200) {  
            const list = res.data || [];  
            if (list.length === 0) {  
              this.userFinished = true;  
              return;  
            }  
            this.userList = [...this.userList, ...list];  
          }  
        });  
    },  
    // 切换地图视图（50%地图 + 50%信息区）  
    toggleMapView() {  
      this.$http.getShowLte().then((res) => {  
        if (res.status == 200) {  
          if (res.data.show_lte === 1) {  
            this.shareLocation = true;  
          } else {  
            this.shareLocation = false;  
          }  
          this.loadUsersLocation();  
          if (!this.mapExpanded) {  
            // 展开时显示底部信息  
            this.mapHeight = "50vh";  
            this.showBottomInfo = true;  
          } else {  
            // 收起地图回原高度  
            this.mapHeight = "90vh";  
            this.showBottomInfo = false;  
          }  
          this.mapExpanded = !this.mapExpanded;  
          this.controls = [];  
        }  
      });  
    },  
    //点击地图  
    mapClick() {  
      if (this.mapExpanded) {  
        // 收起地图回原高度  
        this.mapHeight = "82vh";  
        this.mapExpanded = !this.mapExpanded;  
        this.updateControlsPosition();  
        this.showBottomInfo = false;  
      }  
    },  
    // 查看附近好友  
    checkNearFriends() {  
      // this.loadUsersLocation();  
      this.activeTab = 1;  
    },  
    // 开关共享位置  
    toggleShareLocation(e) {  
      this.shareLocation = e.detail.value;  
      if (this.shareLocation) {  
        //调用接口控制是否显示当前自己的定位  
        this.$http  
          .editprofile({  
            show_lte: 1, //是否显示地址定位 1 显示 0 不显示  
          })  
          .then((res) => {  
            if (res.status == 200) {  
              console.log("res", res);  
              uni.showToast({  
                title: "已开启位置共享",  
                icon: "none",  
              });  
              // this.showMyMarker();  
              this.loadUsersLocation();  
            }  
          });  
      } else {  
        this.$http  
          .editprofile({  
            show_lte: 0, //是否显示地址定位 1 显示 0 不显示  
          })  
          .then((res) => {  
            if (res.status == 200) {  
              console.log("res", res);  
              uni.showToast({  
                title: "已关闭位置共享",  
                icon: "none",  
              });  
              this.loadUsersLocation();  
            }  
          });  
      }  
    },  
    // 只显示自己坐标的标记点  
    showMyMarker() {  
      if (!this.longitude || !this.latitude) {  
        uni.showToast({ title: "未获取到定位信息", icon: "none" });  
        return;  
      }  

      // 设置地图标记  
      this.markers = [  
        {  
          id: 0,  
          longitude: this.longitude,  
          latitude: this.latitude,  
          width: 40,  
          height: 40,  
          iconPath: "/static/images/home/avatar.png",  
          label: {  
            content: "我的位置",  
            fontSize: 12,  
            color: "#333",  
            anchorX: -42,  
            anchorY: -56,  
          },  
        },  
      ];  

      // 将地图中心定位到自己  
      this.mapCtx.moveToLocation({  
        longitude: this.longitude,  
        latitude: this.latitude,  
      });  
    },  
    async fetchUsersFromAPI() {  
      try {  
        const res = await this.$http.nearMapUser({ page: 1, limit: 200 });  
        console.log("res", res);  
        if (res.status === 200) {  
          return res.data.map((item) => ({  
            id: item.id,  
            lon: item.longitude,  
            lat: item.latitude,  
            avatar: item.headimgurl || "",  
            name: item.user_name,  
          }));  
        }  
      } catch (err) {  
        console.error("请求失败", err);  
      }  
      return [];  
    },  
    // async fetchUsersFromAPI() {  
    //   try {  
    //     const res = await this.$http.nearMapUser({ page: 1, limit: 200 });  
    //     console.log("res", res);  

    //     if (res.status !== 200) return [];  

    //     const list = res.data || [];  

    //     // 并行下载头像  
    //     const users = list.map((item) => this.processUserAvatar(item));  
    //     return Promise.all(users);  
    //   } catch (err) {  
    //     console.error("请求失败", err);  
    //     return [];  
    //   }  
    // },  
    // //下载头像并返回本地路径  
    // async processUserAvatar(item) {  
    //   let localAvatar = "";  

    //   if (item.headimgurl) {  
    //     try {  
    //       const [err, downloadRes] = await uni.downloadFile({  
    //         url: item.headimgurl,  
    //       });  

    //       console.log("downloadRes=", err, downloadRes);  

    //       if (!err && downloadRes.statusCode === 200) {  
    //         localAvatar = downloadRes.tempFilePath; // 本地临时路径  
    //       }  
    //     } catch (e) {  
    //       console.error("头像下载异常", e);  
    //     }  
    //   }  

    //   return {  
    //     id: item.id,  
    //     lon: item.longitude,  
    //     lat: item.latitude,  
    //     avatar: localAvatar,  
    //     name: item.user_name,  
    //   };  
    // },  
    // 计算中心点  
    getCenter(points) {  
      const lons = points.map((p) => p.longitude);  
      const lats = points.map((p) => p.latitude);  
      return {  
        longitude: (Math.min(...lons) + Math.max(...lons)) / 2,  
        latitude: (Math.min(...lats) + Math.max(...lats)) / 2,  
      };  
    },  
    // 计算缩放等级（可根据需求调节）  
    getScale(points) {  
      const lons = points.map((p) => p.longitude);  
      const lats = points.map((p) => p.latitude);  
      const lonDiff = Math.max(...lons) - Math.min(...lons);  
      const latDiff = Math.max(...lats) - Math.min(...lats);  
      const maxDiff = Math.max(lonDiff, latDiff);  
      if (maxDiff < 0.01) return 17;  
      if (maxDiff < 0.05) return 16;  
      if (maxDiff < 0.1) return 15;  
      if (maxDiff < 0.5) return 12;  
      return 7;  
    },  
    // 加载用户位置到地图（接口数据+手动缩放）  
    async loadUsersLocation() {  
      try {  
        const users = await this.fetchUsersFromAPI();  
        console.log("users", users);  
        if (!users.length) {  
          uni.showToast({ title: "暂无共享位置", icon: "none" });  
          this.markers = [];  
          return;  
        }  

        // markers  
        this.markers = users.map((u) => ({  
          id: u.id,  
          longitude: u.lon,  
          latitude: u.lat,  
          width: 40,  
          height: 40,  
          iconPath: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/logo.png",//固定链接  
          label: {  
            content: u.name,  
            fontSize: 12,  
            color: "#333",  
            anchorX: -42,  
            anchorY: -56,  
          },  
        }));  
        this.includePoints = users.map((u) => ({  
          longitude: u.lon,  
          latitude: u.lat,  
        }));  

        await this.$nextTick();  

        if (this.includePoints.length === 1) {  
          // 单点，直接设置中心  
          this.longitude = this.includePoints[0].longitude;  
          this.latitude = this.includePoints[0].latitude;  
          this.scale = 14;  
        } else {  
          // 多点，手动计算中心和缩放  
          const center = this.getCenter(this.includePoints);  
          this.longitude = center.longitude;  
          this.latitude = center.latitude;  
          this.scale = this.getScale(this.includePoints);  
        }  
      } catch (e) {  
        console.error("加载共享位置失败", e);  
        uni.showToast({ title: "加载共享位置失败", icon: "none" });  
      }  
    },  

    // 地图点击事件  
    onMarkerClick(event) {  
      console.log("event", event);  
      const markerId = event.detail.markerId; // 获取点击的标记ID  
      const markerData = this.markers.find((marker) => marker.id === markerId);  
      if (markerData.id == uni.getStorageSync("userId")) {  
        this.$navigateTo("/pagesB/my/other/personalCenter", {  
          source: "my",  
          userId: markerData.id,  
        });  
      } else {  
        this.$navigateTo("/pagesB/my/other/personalCenter", {  
          source: "others",  
          userId: markerData.id,  
        });  
      }  
    },  
    //点击控件  
    bindControlTap(e) {  
      if (e.detail.controlId === 1) {  
        this.loadUsersLocation();  
      }  
    },  
  },  
  onReachBottom() {  
    this.loadMore();  
  },  
};  
</script>  

<style lang="scss" scoped>  
@import "~uview-ui/index.scss";  
</style>  
<style lang="less" scoped>  
@import "@/static/css/common.less";  
::v-deep.amap-icon {  
  border-radius: 50%;  
}  
.tabs-container {  
  width: 100%;  
  display: flex;  
  flex-direction: column;  
  padding-top: 30px;  
}  
.tabs-header {  
  display: flex;  
  flex-direction: row;  
  white-space: nowrap;  
  overflow-x: auto;  
  -webkit-overflow-scrolling: touch;  
}  
.tabListBox {  
  width: 100%;  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
  position: fixed;  
  top: 0px;  
  padding-top: 25px;  
  z-index: 100;  
  background-image: url(@/static/images/home/background.png);  
  background-size: 100% auto;  
}  
.tabList {  
  width: 100%;  
  display: flex;  
  align-items: center;  
}  
.tab-item {  
  margin: 12px 0px 5px 0px;  
  font-family: PingFang SC;  
  font-size: 14px;  
  color: #9b9aa1;  
  position: relative;  
  .subscriptImg {  
    width: 0;  
    height: 0;  
  }  
}  
.tab-item.active {  
  font-family: Alimama ShuHeiTi;  
  font-weight: 700;  
  font-size: 18px;  
  color: #333;  
  .subscriptImg {  
    width: 11px;  
    height: 11px;  
    position: absolute;  
    top: -5px;  
    right: -7px;  
  }  
}  
.tab-item.active::after {  
  content: "";  
  position: absolute;  
  bottom: -6px;  
  left: 50%;  
  transform: translateX(-50%);  
  width: 39px;  
  height: 10px;  
  background: linear-gradient(270deg, #ff523c 0%, #f2681d 100%);  
  border-radius: 22px;  
}  
.activeBox {  
  margin-top: 10px;  
  width: 10%;  
}  
.dhImg {  
  width: 17px;  
  height: 17px;  
}  
.align-center {  
  justify-content: space-around;  
}  
.tabs-content {  
  margin-top: 40px;  
}  

.homeBody {  
  min-height: 100%;  
  background-image: url(../../static/images/home/background.png);  
  background-size: 100% auto;  
  position: relative;  
  .loadingWrapper {  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    font-size: 16px;  
    color: #333;  
  }  
  // .dynamicBox,  
  // .peopleNearbyBox {  
  //   padding: 0px 14px;  
  // }  
  .searchBox {  
    width: calc(100% - 28px);  
    height: 39px;  
    background: #fff;  
    border-radius: 86px;  
    margin: 84px 14px 0 14px;  
    padding: 0 10px;  
    display: flex;  
    align-items: center;  
    .searchImg {  
      width: 16px;  
      height: 16px;  
    }  
    .seachText {  
      margin-left: 6px;  
      font-size: 14px;  
      color: #999;  
    }  
  }  
  .releaseBtnBox {  
    position: fixed;  
    right: 10px;  
    bottom: 124px;  
    z-index: 100;  
    .releaseImg {  
      width: 69px;  
      height: 69px;  
    }  
  }  
  .map-bottom-box {  
    padding: 15px;  
    .bottom-item {  
      width: 100%;  
      margin-bottom: 15px;  
      display: flex;  
      justify-content: space-between;  
      align-items: center;  
      .label {  
        width: 30%;  
      }  
      .value {  
        width: 70%;  
        // overflow: hidden;  
        // text-overflow: ellipsis;  
        // white-space: nowrap;  
      }  
      .dwImg {  
        width: 50px;  
        height: 46px;  
        // border: 1px solid black;  
      }  
      .dw2Img {  
        width: 40px;  
        height: 36px;  
        margin-right: 2px;  
      }  
    }  
  }  
}  
</style>