uni-app map真机高德地图marker使用网络地图图片不展示

以下是我的页面代码 <template>
<view class="homeBody">
<view class="tabs">
<view class="tabs-container">

    <!-- 内容区 -->  
    <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](/user/import) "~uview-ui/index.scss"; </style> <style lang="less" scoped> [@import](/user/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>