开发
API

MapContext.updateGroundOverlay

基础库 2.42.0 开始支持本方法,低版本需做兼容处理,这是一个异步方法。

更新自定义图片图层。

语法

MapContext.updateGroundOverlay(options)

参数说明

options 为 object 类型,属性如下:

属性名类型默认值必填说明最低支持版本
idstring图片图层 id2.42.0
srcstring图片路径,支持网络图片、临时路径、代码包路径2.42.0
boundsBounds图片覆盖的经纬度范围2.42.0
visiblebooleantrue是否可见2.42.0
zIndexnumber1图层绘制顺序2.42.0
opacitynumber1图层透明度2.42.0
successfunction接口调用成功的回调函数2.42.0
failfunction接口调用失败的回调函数2.42.0
completefunction接口调用结束的回调函数2.42.0

Bounds 类型说明

属性名类型默认值必填说明最低支持版本
southwestLngLat西南角经纬度2.42.0
northeastLngLat东北角经纬度2.42.0

LngLat 类型说明

属性名类型默认值必填说明最低支持版本
longitudenumber经度2.42.0
latitudenumber纬度2.42.0

回调成功

object 类型,属性如下:

属性名类型说明最低支持版本
errMsgstring"MapContext.updateGroundOverlay:ok"2.42.0

回调失败

object 类型,属性如下:

属性名类型说明最低支持版本
errMsgstring"MapContext.updateGroundOverlay:fail" + 详细错误信息2.42.0

扫码体验

请使用字节宿主APP扫码

代码示例

开发者工具中预览

<map
  id="myMap"
  longitude="{{longitude}}"
  latitude="{{latitude}}"
  style="width:100%; height: 300px;"
></map>
<button type="primary" size="default" bindtap="updateGroundOverlay">
  updateGroundOverlay
</button>
Page({
  data: {
    latitude: 23.099994,
    longitude: 113.32452,
  },
  onReady(e) {
    this.mapCtx = tt.createMapContext("myMap");
    // 添加自定义图层
    this.mapCtx.addGroundOverlay({
      id: "picture",
      src:
        "https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/docs/images/image-3873097097749289.5.png",
      bounds: {
        // 西南角
        southwest: {
          longitude: 111.32452,
          latitude: 21.099994,
        },
        // 东北角
        northeast: {
          longitude: 115.32452,
          latitude: 25.099994,
        },
      },
    });
  },
  updateGroundOverlay() {
    this.mapCtx.updateGroundOverlay({
      id: "picture",
      // 更换新的图片
      src:
        "https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/docs/images/image-1273877887894621.png",
      // 经度度范围变小
      bounds: {
        // 西南角
        southwest: {
          longitude: 112.32452,
          latitude: 22.099994,
        },
        // 东北角
        northeast: {
          longitude: 114.32452,
          latitude: 24.099994,
        },
      },
      success(res) {
        console.log("更换自定义图层成功", res);
        tt.showToast({
          title: "更换成功",
        });
      },
      fail(err) {
        console.log("更换自定义图层失败", err);
        tt.showToast({
          title: "更换失败",
          icon: "none",
        });
      },
      complete(res) {
        console.log(res);
      },
    });
  },
});

Bug & Tip

  • Tip: 开发者工具暂不支持调试该 api,请在真机上调试。
点击纠错
该文档是否对你的开发有所帮助?
有帮助
没帮助
该文档是否对你的开发有所帮助?
有帮助
没帮助