map

<!-- map.ttml -->
<map
  id="myMap"
  show-location
  longitude="{{longitude}}"
  latitude="{{latitude}}"
  circles="{{circles}}"
  markers="{{markers}}"
  polyline="{{polyline}}"
  scale="{{scale}}"
  rotate="{{rotate}}"
  skew="{{skew}}"
  polygons="{{polygons}}"
  show-compass
  enable-overlooking
  enable-rotate
  bindtap="mapTap"
  bindmarkertap="markerTap"
  bindcallouttap="calloutTap"
  bindregionchange="regionChange"
  style="width:100%; height: 300px;"
></map>
<view class="container">
  <view class="btn-area">
    <button bindtap="authLocation" type="primary" size="mini">申请定位权限</button>
    <button bindtap="getCenterLocation" type="primary" size="mini">获取当前地图中心位置</button>
    <button bindtap="moveToLocation" type="primary" size="mini">移动位置</button>
    <button bindtap="getScale" type="primary" size="mini">缩放级别</button>
  </view>
</view>

// map.js
Page({
  data: {
    latitude: 39.907957,
    longitude: 116.397493,
    scale: 15,
    rotate: 10,
    skew: 5,
    polygons: [
      {
        points: [
          {
            latitude: 39.915,
            longitude: 116.404,
          },
          {
            longitude: 116.405,
            latitude: 39.92,
          },
          {
            longitude: 116.423493,
            latitude: 39.907445,
          },
        ],
        strokeWidth: 3,
        strokeColor: "#224499",
        fillColor: "#22334455",
        zIndex: 0,
      },
    ],
    circles: [
      {
        latitude: 39.907957,
        longitude: 116.397493,
        radius: 400,
      },
    ],
    markers: [
      {
        id: 1,
        longitude: 116.397493,
        latitude: 39.907957,
        title: "这是地标1",
        alpha: 0.6,
        anchorX: 0.5,
        anchorY: 1,
      },
      {
        id: 2,
        longitude: 116.39394,
        latitude: 39.90503,
        callout: {
          content: "这是地标 2",
          color: "#222222",
          fontSize: 12,
          borderRadius: 12,
          padding: 4,
          display: "ALWAYS",
          textAlign: "center",
          borderWidth: 1,
          borderColor: "#222222",
          bgColor: "#ffffff",
          anchorX: 0,
          anchorY: 0,
        },
      },
      {
        id: 3,
        longitude: 116.40159,
        latitude: 39.90511,
        title: "这是地标3",
      },
    ],
    polyline: [
      {
        points: [
          {
            longitude: 116.397493,
            latitude: 39.907957,
          },
          {
            longitude: 116.39394,
            latitude: 39.90503,
          },
          {
            longitude: 116.40159,
            latitude: 39.90511,
          },
        ],
        color: "#222222",
        width: 4,
        dottedLine: false,
        colorList: ["#000022", "#220000"],
        borderColor: "#222222",
        borderWidth: 0,
      },
    ],
  },
  onReady() {
    this.mapCtx = tt.createMapContext("myMap");
  },
  markerTap(e) {
    console.log("tap marker", e);
  },
  mapTap(e) {
    console.log("tap map", e);
  },
  calloutTap(e) {
    console.log("tap callout", e);
  },
  regionChange(e) {
    console.log("region", e);
  },
  getCenterLocation() {
    this.mapCtx.getCenterLocation({
      success({ longitude, latitude }) {
        let res = `经度: ${longitude}, 纬度: ${latitude}`;
        console.log(res);
        tt.showModal({
          content: res,
          showCancel: false,
        });
      },
      fail(err) {
        console.log("获取位置失败", err);
      },
      complete(res) {
        console.log("getCenterLocation complete", res);
      },
    });
  },
  moveToLocation() {
    this.mapCtx.moveToLocation({
      success(res) {
        console.log("move success: ", res);
      },
      fail(err) {
        console.log("move err: ", err);
      },
      complete(res) {
        console.log("move complete", res);
      },
    });
  },
  // Auth
  authLocation() {
    let that = this;
    tt.authorize({
      scope: "scope.userLocation",
      success(res) {
        console.log(res, res.data);
        if (res.data["scope.userLocation"] === "ok") that.msg("您已允许授权");
      },
      fail(err) {
        console.log(err);
        if (err.data["scope.userLocation"] === "auth deny")
          that.msg("您已拒绝授权");
      },
    });
  },
  getScale() {
    let that = this;
    this.mapCtx.getScale({
      success(res) {
        console.log("getScale 成功执行了", res);
        that.msg(`当前缩放级别：${res.scale}`);
      },
      fail(err) {
        console.log("getScale失败", err);
      },
      complete(res) {
        console.log("缩放complete执行", res);
      },
    });
  },
  msg(title, duration = 1500) {
    tt.showToast({
      title,
      duration,
    });
  },
});