使用创建自定义图片图层mapCtx.addGroundOverlay，没有按照设置的点位显示？

Question

that.mapCtx = wx.createMapContext('map', that)
    const southwest = {
      // 西南角经纬度
      latitude: 34.575779,
      longitude: 119.312979,
    }
    const northeast = {
      // 东北角经纬度
      latitude: 34.577849,
      longitude: 119.309944,
    }
    that.mapCtx.addGroundOverlay({
      id: 1,// 手绘图图层id
      src: "https://gch.fxr.asia/map.png",// 手绘图地址
      bounds: {
        southwest,
        northeast
      },
      zIndex: 1, // 手绘地图层级
    })

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

使用创建自定义图片图层mapCtx.addGroundOverlay，没有按照设置的点位显示？

你遇到了一个问题，使用 mapCtx.addGroundOverlay 方法创建自定义图片图层，但是图片没有按照设置的点位显示。

问题可能出在以下几个方面：

1. 图层的坐标系不正确：addGroundOverlay 方法需要传入一个 GroundOverlayOptions 对象，其中包含了图层的坐标系、大小、透明度等信息。如果坐标系不正确，图层可能不会显示在正确的位置。
2. 图层的大小不正确：如果图层的大小不正确，图层可能不会显示在正确的位置。
3. 图层的透明度不正确：如果图层的透明度不正确，图层可能不会显示在正确的位置。

解决方案：

1. 检查坐标系是否正确：确保图层的坐标系与地图的坐标系一致。
2. 检查图层的大小是否正确：确保图层的大小与地图的大小一致。
3. 检查图层的透明度是否正确：确保图层的透明度为 0.5 或更高。

代码示例：

const southwest = {
  latitude: 30.123456,
  longitude: 120.123456
};
const northeast = {
  latitude: 30.123789,
  longitude: 120.123789
};

const groundOverlayOptions = {
  id: 'myGroundOverlay',
  url: 'https://example.com/image.png',
  southwest: southwest,
  northeast: northeast,
  opacity: 0.5
};

that.mapCtx.addGroundOverlay(groundOverlayOptions);

在上面的代码中，我们创建了一个 GroundOverlayOptions 对象，其中包含了图层的坐标系、大小、透明度等信息。然后，我们使用 addGroundOverlay 方法将图层添加到地图上。