<view class="page">
  <view class="page-section">
    <view class="page-section-demo">
      <map
        id="map"
        longitude="{{longitude}}"
        latitude="{{latitude}}"
        scale="{{scale}}"
        controls="{{controls}}"
        onControlTap="controltap"
        markers="{{markers}}"
        onMarkerTap="markertap"
        polyline="{{polyline}}"
        polygon="{{polygon}}"
        circles="{{circles}}"
        onRegionChange="regionchange"
        onTap="tap"
        onCalloutTap="callouttap"
        include-points="{{includePoints}}"
        ground-overlays="{{ground-overlays}}">
      </map>
    </view>
  </view>
  <view class="page-section-btns">
    <view onTap="demoResetMap">reset</view>
    <view onTap="demoGetCenterLocation">get center location</view>
    <view onTap="demoMoveToLocation">move to location</view>
  </view>
  <view class="page-section-btns">
    <view onTap="demoMarkerAnimation">animation</view>
    <view onTap="demoMarkerLabel">label</view>
    <view onTap="demoMarkerCustomCallout">custom callout</view>
  </view>
  <view class="page-section-btns">
    <view onTap="demoMarkerAppendStr">text marker</view>
    <view onTap="demoShowRoute">show route</view>
  </view>
  <view class="page-section-btns">
    <view onTap="demoCompass">compass</view>
    <view onTap="demoGesture">gesture</view>
  </view>
  <view class="page-section-btns">
    <view onTap="demoPolyline">polyline</view>
    <view onTap="demoPolygon">polygon</view>
    <view onTap="demoCircle">circle</cview>
  </view>
  <view class="page-section-btns">
  </view>
</view>

const markers = [{
  id: 0,
  latitude: 30.266786,
  longitude: 120.10675,
  width: 19,
  height: 31,
  iconPath: 'https://gw.alipayobjects.com/mdn/rms_dfc0fe/afts/img/A*x9yERpemTRsAAAAAAAAAAAAAARQnAQ',
  callout: {
    content: 'callout',
  },
}];

const animMarker = [{
  id: 1,
  latitude: 30.266786,
  longitude: 120.10675,
  width: 19,
  height: 31,

  iconPath: 'https://gw.alipayobjects.com/mdn/rms_dfc0fe/afts/img/A*x9yERpemTRsAAAAAAAAAAAAAARQnAQ',

  markerLevel: 2
}];

const labelMarker = [{
  id: 2,
  latitude: 30.266786,
  longitude: 120.10675,
  width: 19,
  height: 31,
  iconPath: 'https://gw.alipayobjects.com/mdn/rms_dfc0fe/afts/img/A*x9yERpemTRsAAAAAAAAAAAAAARQnAQ',
  label:{
    content:"Hello Label",
    color:"#00FF00",
    fontSize:14,
    borderRadius:3,
    bgColor:"#ffffff",
    padding:10,
  },
  markerLevel: 2
}];
const customCalloutMarker = [{
  id: 3,
  latitude: 30.266786,
  longitude: 120.10675,
  width: 19,
  height: 31,
  iconPath: 'https://gw.alipayobjects.com/mdn/rms_dfc0fe/afts/img/A*x9yERpemTRsAAAAAAAAAAAAAARQnAQ',
  "customCallout":{
    "type": 2,
    "descList": [{
      "desc": "Estimation",
      "descColor": "#333333"
    }, {
      "desc": "5mins",
      "descColor": "#108EE9"
    }, {
      "desc": "Arrive",
      "descColor": "#333333"
    }],
    "isShow": 1
  },
  markerLevel: 2
}];

const iconAppendStrMarker = [{
  id: 34,
  latitude: 30.266786,
  longitude: 120.10675,
  width: 19,
  height: 31,
  iconAppendStr:"iconAppendStr",
  markerLevel: 2
}];

var myTrafficEnabled = 0;
var myCompassEnabled = 0;
var myScaleEnabled = 0;
var myGestureEnabled = 0;

const longitude = 120.10675;
const latitude = 30.266786;
const includePoints = [{
  latitude: 30.266786,
  longitude: 120.10675,
}];

Page({
  data: {
    scale: 14,
    longitude,
    latitude,
    includePoints,
  },
  onReady() {
    // use my.createMapContext JSAPI to get the map context
    this.mapCtx = my.createMapContext('map');
  },
  demoResetMap() {
    this.setData({
      scale: 14,
      longitude,
      latitude,
      includePoints,
      'ground-overlays':[],
      circles:[],
      polygon:[],
      polyline:[],
    });
    this.mapCtx.clearRoute();
  },
  demoGetCenterLocation() {
    this.mapCtx.getCenterLocation({
      success: (res) => {
        my.alert({
          content: 'longitude:' + res.longitude + '\nlatitude:' + res.latitude + '\nscale:' + res.scale,
        });
        console.log(res.longitude);
        console.log(res.latitude);
        console.log(res.scale);
      },
    });
  },
  demoMoveToLocation() {
    this.mapCtx.moveToLocation();
  },
  demoMarkerAnimation() {
    
    this.mapCtx.updateComponents({
      'markers':animMarker,
    });
    this.mapCtx.updateComponents({
      command:{
        markerAnim:[{markerId:1,type:0},],
      }
    });
  },
  demoMarkerLabel() {
    
    this.mapCtx.updateComponents({
      scale: 14,
      longitude,
      latitude,
      includePoints,
      'markers':labelMarker,
    });
  },
  demoMarkerCustomCallout() {
    this.mapCtx.updateComponents({
      scale: 14,
      longitude,
      latitude,
      includePoints,
      'markers':customCalloutMarker,
    });
  },
  demoMarkerAppendStr() {
    this.mapCtx.updateComponents({
      scale: 14,
      longitude,
      latitude,
      includePoints,
      'markers':iconAppendStrMarker,
    });
  },
  demoShowRoute() {
    this.mapCtx.showRoute({
      startLat:30.257839, 
      startLng:120.062726,
      endLat:30.256718,
      endLng:120.059985,
      zIndex:4,
      routeColor:'#FFB90F',
      iconPath: "https://gw.alipayobjects.com/mdn/rms_dfc0fe/afts/img/A*EGCiTYQhBDkAAAAAAAAAAAAAARQnAQ",
      iconWidth:10,
      routeWidth:10
     });
  },
  demoCompass() {
    myCompassEnabled = (myCompassEnabled+1) %2;
    this.mapCtx.showsCompass({isShowsCompass:myCompassEnabled});
  },
  demoGesture() {
    myGestureEnabled = (myGestureEnabled+1) %2;
    this.mapCtx.gestureEnable({isGestureEnable:myGestureEnabled});
  },
  demoPolyline() {
    this.setData({
      scale: 16,
      longitude,
      latitude,
      polyline: [{
        points: [{// right-top
          latitude: 30.264786,
          longitude: 120.10775,
        },{// left-bottom
          latitude: 30.268786,
          longitude: 120.10575,
        }],
        color: '#FF0000DD',
        width: 10,
        dottedLine: false,
        iconWidth:10,
      }],
    });
  },
  demoPolygon() {
    this.setData({
      scale: 16,
      longitude,
      latitude,
      polygon: [{
        points: [{// right-top
          latitude: 30.264786,
          longitude: 120.10775,
        },{//   right-bottom
          latitude: 30.268786,
          longitude: 120.10775,
        },{//  left-bottom
          latitude: 30.268786,
          longitude: 120.10575,
        },{// left=top
          latitude: 30.264786,
          longitude: 120.10575,
        }],
        fillColor: '#BB0000DD',
        width: 5,
      }],
    });
    
  },
  demoCircle() {
    this.setData({
      scale: 16,
      longitude,
      latitude,
      circles: [{
        longitude,
        latitude,
        color: '#BB76FF88',
        fillColor: '#BB76FF33',
        radius: 100,
        strokeWidth:3,
    }]
    });
  },
  regionchange(e) {
    console.log('regionchange', e);
  },
  onPanelTap(e) {
    console.log('paneltap:', e);
  },
  markertap(e) {
    console.log('marker tap', e);
  },
  controltap(e) {
    console.log('control tap', e);
  },
  tap() {
    console.log('tap');
  },
  callouttap(e) {
    console.log('callout tap', e);
  },
});