开发
API

MapContext

MapContext 实例,通过它能够操作地图。

方法

方法名说明详细说明
getCenterLocation获取当前地图中心的经纬度,返回的是 gcj02 坐标系,可以用于 tt.openLocation()链接
getRegion获取当前地图的视野范围链接
getScale获取当前地图的缩放级别链接
moveToLocation将地图中心移置当前定位点,此时需设置地图组件 show-location 为 true。链接

扫码体验

请使用字节宿主APP扫码

代码示例

开发者工具中预览

<!-- map.ttml -->
<map
  id="myMap"
  style="width: 100%; height: 400px;"
  latitude="{{latitude}}"
  longitude="{{longitude}}"
  markers="{{markers}}"
  circles="{{circles}}"
  show-location="{{true}}"
>
</map>
<view>
  <button bindtap="authLocation" type="primary">申请定位权限</button>
  <button bindtap="getCenterLocation" type="primary">获取位置</button>
  <button bindtap="moveToLocation" type="primary">移动位置</button>
</view>
// map.js
Page({
  data: {
    latitude: 39.907957,
    longitude: 116.397493,
    markers: [
      {
        id: 1,
        latitude: 39.907957,
        longitude: 116.397493,
        title: "北京",
      },
    ],
    circles: [
      {
        latitude: 39.907957,
        longitude: 116.397493,
        radius: 100,
      },
    ],
  },
  onReady() {
    this.mapCtx = tt.createMapContext("myMap");
  },
  getCenterLocation() {
    this.mapCtx.getCenterLocation({
      success({ longitude, latitude }) {
        let res = `longitude: ${longitude}, latitude: ${latitude}`;
        console.log(res);
      },
    });
  },
  moveToLocation() {
    this.mapCtx.moveToLocation({
      success(res) {
        console.log("move success: ", res);
      },
      fail(err) {
        console.log("move err: ", err);
      },
    });
  },
  // Auth
  authLocation() {
    tt.authorize({
      scope: "scope.userLocation",
      success(res) {
        console.log(res);
      },
      fail(err) {
        console.log(err);
      },
    });
  },
});

Bug & Tip

  • Tip:使用 moveToLocation 时,不传递 longitude,latitude 参数,则默认移动到用户当前位置(需申请定位权限并设置 show-location 为 true。
点击纠错
评价此篇文档