uni-app renderjs 创建高德地图圆标记 app端不显示 h5端显示

uni-app renderjs 创建高德地图圆标记 app端不显示 h5端显示

开发环境 版本号 项目创建方式
Windows win11 HBuilderX

操作步骤：

updateCircle(newVal, oldValue) {
console.log(newVal, 'circlecirclecirclecircle', oldValue)
// 循环生成marker
newVal.forEach((item, index) => {
console.log(item, 'circlecircle');
this.circle = new AMap.CircleMarker({
center: new AMap.LngLat(116.433322, 39.900255), //圆心
radius: 2000, //半径
strokeColor: "white", //轮廓线颜色
strokeWeight: 2, //轮廓线宽度
strokeOpacity: 0.5, //轮廓线透明度
fillColor: "rgba(0,0,255,1)", //多边形填充颜色
fillOpacity: 0.5, //多边形填充透明度
zIndex: 10, //多边形覆盖物的叠加顺序
cursor: "pointer", //鼠标悬停时的鼠标样式
});
console.log(this.circle, 'asdlashdohasodhlakshd');
map.add(this.circle);
});
},

预期结果：

APP端也能显示圆

实际结果：

APP 不显示

bug描述：

在renderjs中创建高德地图，使用高德的圆标记点，APP端不显示 H5端显示

更多关于uni-app renderjs 创建高德地图圆标记 app端不显示 h5端显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app renderjs 创建高德地图圆标记 app端不显示 h5端显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在使用 uni-app 的 renderjs 创建高德地图圆标记时，如果遇到在 App 端不显示而在 H5 端显示的问题，可能是由于以下几个原因导致的：

1. renderjs 在 App 端的兼容性问题

  • renderjs 是 uni-app 提供的一种在 H5 端运行 JavaScript 的方式，但在 App 端，renderjs 的执行环境与 H5 端有所不同，可能会导致某些 API 或功能无法正常工作。
  • 在 App 端，renderjs 的执行环境是基于 WebView 的，而 H5 端则是直接在浏览器中运行。因此，某些依赖于浏览器环境的 API 在 App 端可能无法正常使用。

2. 高德地图 API 的兼容性问题

  • 高德地图的 JavaScript API 在 H5 端可以正常使用，但在 App 端可能会因为 WebView 的限制或 renderjs 的执行环境问题而无法正常显示。
  • 特别是在创建圆标记时，可能需要检查高德地图的 API 是否在 App 端被正确加载和执行。

3. renderjs 代码的兼容性

  • 确保 renderjs 中的代码在 App 端和 H5 端都能正常运行。可以尝试在 renderjs 中添加一些调试信息，检查代码是否在 App 端正确执行。

解决方案

1. 使用 uni-app 的原生地图组件

  • 如果 renderjs 在 App 端无法正常工作，可以考虑使用 uni-app 提供的原生地图组件（如 map 组件）来替代高德地图的 JavaScript API。
  • uni-app 的 map 组件在 App 端和 H5 端都有较好的兼容性，可以直接使用。

2. 检查高德地图 API 的加载

  • 确保高德地图的 JavaScript API 在 App 端正确加载。可以在 renderjs 中添加一些调试信息，检查 API 是否加载成功。
  • 如果 API 加载失败，可以尝试使用 uni-app 的 web-view 组件来加载高德地图的 H5 页面。

3. 使用 uni-app 的 plus API

  • 在 App 端，可以使用 uni-app 的 plus API 来调用原生功能，例如使用 plus.maps 来创建地图和标记。
  • 这样可以避免 renderjs 在 App 端的兼容性问题。

4. 调试和日志

  • 在 renderjs 中添加调试信息，检查代码在 App 端和 H5 端的执行情况。
  • 使用 console.log 或 uni.showToast 来输出调试信息，帮助定位问题。

示例代码

以下是一个简单的示例，展示如何在 uni-app 中使用 renderjs 创建高德地图圆标记：

<template>
  <view>
    <canvas id="mapCanvas" canvas-id="mapCanvas" style="width: 100%; height: 300px;"></canvas>
  </view>
</template>

<script>
export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 在 H5 端使用 renderjs 创建高德地图
      if (process.env.VUE_APP_PLATFORM === 'h5') {
        this.$renderjs.initMap();
      } else {
        // 在 App 端使用原生地图组件或其他方式
        this.initNativeMap();
      }
    },
    initNativeMap() {
      // 在 App 端使用原生地图组件或其他方式
      // 例如使用 plus.maps 或 uni-app 的 map 组件
    }
  }
}
</script>

<script module="renderjs" lang="renderjs">
export default {
  initMap() {
    // 在 H5 端使用高德地图 API 创建地图和圆标记
    const map = new AMap.Map('mapCanvas', {
      zoom: 13,
      center: [116.397428, 39.90923]
    });

    const circle = new AMap.Circle({
      center: [116.397428, 39.90923],
      radius: 1000, // 半径，单位：米
      strokeColor: "#FF33FF",
      strokeOpacity: 1,
      strokeWeight: 3,
      fillColor: "#1791fc",
      fillOpacity: 0.6
    });

    map.add(circle);
  }
}
</script>
回到顶部