uni-app app端通过renderjs渲染高德地图 使用本地图片作为marker 安卓、H5显示正常, ios 不显示

发布于 1周前 作者 phonegap100 来自 Uni-App

uni-app app端通过renderjs渲染高德地图 使用本地图片作为marker 安卓、H5显示正常, ios 不显示

产品分类

uniapp/App

示例代码

dispatchSite(data) {
    // 一次性将海量点添加到图层
    let labelsLayer = new AMap.LabelsLayer({
        zIndex: 1000,
        collision: false
    });
    map.add(labelsLayer);
    let markers = [];
    data.forEach(item => {
        let level = item.level;
        let labelMarker = new AMap.LabelMarker({
            name: item.name,
            position: [item.lng, item.lat],
            rank: 1,
            zIndex: 16,
            icon: {
                type: "image",
                image: "./static/dispatch/warm.png",
                size: [58, 33],
                opacity: 1 // 设置不透明度
            },
            text: {
                content: `${item.number}`,
                direction: "center",
                offset: [10, -5],
                style: {
                    fontSize: 12,
                    fillColor: "#333",
                    backgroundColor: "rgba(34, 136, 79, 0)"
                }
            }
        });
        labelMarker.on("click", function(e) {
            ownerVms.callMethod('getmaptype', item)
        });
        markers.push(labelMarker);
    });
    labelsLayer.add(markers);
    // 数据量小于500时再加载
    if (data.length < 500) {
        let allMarket = []
        data.forEach(item => {
            let polygon = new AMap.Polygon({
                path: item.path, //路径
                strokeColor: TypeConfig[7].strokeColor,
                strokeWeight: TypeConfig[7].strokeWeight,
                strokeOpacity: TypeConfig[7].strokeOpacity,
                fillOpacity: TypeConfig[7].fillOpacity,
                fillColor: TypeConfig[7].fillColor,
                strokeStyle: TypeConfig[7].strokeStyle,
                zIndex: TypeConfig[7].zIndex,
                bubble: TypeConfig[7].bubble
            });
            //多边形 Polygon对象添加到 Map
            allMarket.push(polygon)
        });
        map.add(allMarket);
    }
}

操作步骤

【报Bug】app端通过renderjs渲染高德地图 使用本地图片作为marker 安卓、H5显示正常, ios 不显示

预期结果

【报Bug】app端通过renderjs渲染高德地图 使用本地图片作为marker 安卓、H5显示正常, ios 显示

实际结果

【报Bug】app端通过renderjs渲染高德地图 使用本地图片作为marker 安卓、H5显示正常, ios 不显示

Bug描述

【报Bug】app端通过renderjs渲染高德地图 使用本地图片作为marker 安卓、H5显示正常, ios 不显示

开发环境信息

项 信息
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 64
HBuilderX类型 正式
HBuilderX版本号 4.29
手机系统 iOS
手机系统版本号 iOS 17
手机厂商 苹果
手机机型 苹果12
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

Harmonyos Next教程
5 回复

dispatchSite(data) { // 一次性将海量点添加到图层 let labelsLayer = new AMap.LabelsLayer({ zIndex: 1000, collision: false }); map.add(labelsLayer); let markers = []; data.forEach(item=>{ let level = item.level; let labelMarker = new AMap.LabelMarker({ name: item.name, position: [item.lng, item.lat], rank:1, zIndex: 16, icon: { type: “image”, image: “./static/dispatch/warm.png”, size: [58, 33], opacity: 1 // 设置不透明度 }, text: { content: ${item.number}, direction: “center”, offset: [10, -5], style: { fontSize: 12, fillColor: “#333”, backgroundColor: “rgba(34, 136, 79, 0)”, }, }, }); labelMarker.on(“click”, function(e) { ownerVms.callMethod(‘getmaptype’, item) }); markers.push(labelMarker); }) labelsLayer.add(markers); // 数据量小于500时再加载 if (data.length<500) { let allMarket = [] data.forEach(item=>{ let polygon = new AMap.Polygon({ path: item.path, //路径 strokeColor: TypeConfig[7].strokeColor, strokeWeight: TypeConfig[7].strokeWeight, strokeOpacity: TypeConfig[7].strokeOpacity, fillOpacity: TypeConfig[7].fillOpacity, fillColor: TypeConfig[7].fillColor, strokeStyle: TypeConfig[7].strokeStyle, zIndex: TypeConfig[7].zIndex, bubble: TypeConfig[7].bubble, }); //多边形 Polygon对象添加到 Map allMarket.push(polygon) }) map.add(allMarket); } },


把./static/dispatch/warm.png换成static/dispatch/warm.png，也就是去掉路径前的./试试

也不行

已解决，把图片转成base64j就行了

针对你提到的问题，关于在uni-app中使用renderjs渲染高德地图，并设置本地图片作为marker时，在安卓和H5平台上显示正常，但在iOS上不显示的问题，这通常是由于iOS平台对资源路径处理或资源加载机制的不同导致的。我们可以通过确保资源路径正确，并尝试使用绝对路径或base64编码图片来解决这个问题。以下是一个示例代码，展示了如何在uni-app中使用renderjs渲染高德地图，并设置本地图片作为marker。

首先，确保你的项目中已经集成了高德地图的SDK，并且在manifest.json中配置了相关权限。

1. 在pages/index/index.vue中：

<template>
  <view class="container">
    <view id="mapContainer" style="width: 100%; height: 100%;"></view>
  </view>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      this.initMap();
    });
  },
  methods: {
    initMap() {
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'https://webapi.amap.com/maps?v=2.0&key=你的高德地图API_KEY';
      script.onload = () => {
        this.loadMap();
      };
      document.head.appendChild(script);
    },
    loadMap() {
      new Promise((resolve) => {
        setTimeout(() => {
          resolve(require('@/static/marker.png')); // 本地marker图片路径
        }, 0);
      }).then((markerImage) => {
        const map = new AMap.Map('mapContainer', {
          resizeEnable: true,
          zoom: 11,
          center: [116.397428, 39.90923]
        });

        const marker = new AMap.Marker({
          position: new AMap.LngLat(116.397428, 39.90923),
          icon: markerImage // 直接使用本地图片路径（这里可能需要处理）
        });
        map.add(marker);
      });
    }
  }
};
</script>

<style>
.container {
  width: 100%;
  height: 100vh;
}
</style>

注意：

  1. 资源路径：在iOS上，直接使用require获取的本地图片路径可能不被支持。你可以尝试将图片转换为base64编码，然后直接作为icon的url属性。

  2. Base64编码：可以使用工具将图片转换为base64，然后在代码中直接使用该编码字符串。

const markerImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...'; // base64编码的图片数据
  1. 调试：在iOS真机上进行调试，查看控制台是否有资源加载失败的错误，这有助于定位问题。

通过上述方法，你应该能够在iOS上正确显示本地图片作为高德地图的marker。如果问题仍然存在，建议检查iOS平台对资源加载的具体限制，并参考高德地图官方文档或社区获取更多帮助。

回到顶部