init

xhs-mini-demos/component-case/map/map.css

@@ -0,0 +1,10 @@
+
+._cred {
+  display: inline;
+}
+
+._dflex button {
+  margin: 10px 0;
+  background-color: red;
+  color: white;
+}

xhs-mini-demos/component-case/map/map.js

@@ -0,0 +1,141 @@
+Page({
+  onShareAppMessage() {
+    return {
+      title: 'map',
+      path: 'page/component/pages/map/map',
+    };
+  },
+
+  data: {
+    latitude: 31.215815,
+    longitude: 121.474845,
+    markers: [
+      {
+        latitude: 31.215815,
+        longitude: 121.474845,
+        name: '上海小红书',
+        id: '1',
+        callout: {
+          display: 'ALWAYS',
+          content: '上海小红书总部',
+          color: 'red',
+        },
+      },
+    ],
+    covers: [
+      {
+        latitude: 23.099994,
+        longitude: 113.34452,
+        iconPath: '/image/location.png',
+      },
+      {
+        latitude: 23.099994,
+        longitude: 113.30452,
+        iconPath: '/image/location.png',
+      },
+    ],
+    polygons: [
+      {
+        points: [
+          {
+            latitude: 23.099994,
+            longitude: 113.32452,
+          },
+          {
+            latitude: 23.098994,
+            longitude: 113.32352,
+          },
+          {
+            latitude: 23.098994,
+            longitude: 113.32552,
+          },
+        ],
+        strokeWidth: 3,
+        strokeColor: '#FFFFFFAA',
+      },
+    ],
+    subKey: 'B5QBZ-7JTLU-DSSVA-2BRJ3-TNXLF-2TBR7',
+    enable3d: false,
+    showCompass: false,
+    enableOverlooking: false,
+    enableZoom: true,
+    enableScroll: true,
+    enableRotate: false,
+    drawPolygon: false,
+    enableSatellite: false,
+    enableTraffic: false,
+  },
+  toggle3d() {
+    this.setData({
+      enable3d: !this.data.enable3d,
+    });
+  },
+  toggleShowCompass() {
+    this.setData({
+      showCompass: !this.data.showCompass,
+    });
+  },
+  toggleOverlooking() {
+    this.setData({
+      enableOverlooking: !this.data.enableOverlooking,
+    });
+  },
+  toggleZoom() {
+    this.setData({
+      enableZoom: !this.data.enableZoom,
+    });
+  },
+  toggleScroll() {
+    this.setData({
+      enableScroll: !this.data.enableScroll,
+    });
+  },
+  toggleRotate() {
+    this.setData({
+      enableRotate: !this.data.enableRotate,
+    });
+  },
+  togglePolygon() {
+    this.setData({
+      drawPolygon: !this.data.drawPolygon,
+    });
+  },
+  toggleSatellite() {
+    this.setData({
+      enableSatellite: !this.data.enableSatellite,
+    });
+  },
+  toggleTraffic() {
+    this.setData({
+      enableTraffic: !this.data.enableTraffic,
+    });
+  },
+  onReady() {
+    setTimeout(() => {
+      this.mapContext = xhs.createMapContext('mapId');
+      this.mapContext?.getScale({
+        success: console.log,
+      });
+      this.mapContext?.getRegion({
+        success: console.log,
+        fail: console.error,
+      });
+      this.mapContext?.includePoints({
+        success: console.log,
+        fail: console.error,
+      });
+    }, 5000);
+  },
+  bindtap(e) {
+    console.log('bindtap ===>', e);
+  },
+  bindmarkertap(e) {
+    console.log('bindmarkertap ==>', e);
+  },
+  bindcallouttap(e) {
+    console.log('bindcallouttap ==>', e);
+  },
+  bindlabeltap(e) {
+    console.log('bindlabeltap ===>', e);
+  },
+});

xhs-mini-demos/component-case/map/map.json

@@ -0,0 +1,7 @@
+{
+    "navigationBarTitleText": "地图",
+    "usingComponents": {
+        "showbox": "../../common/component/showbox/index",
+        "box": "../../common/component/container/index"
+    }
+}

xhs-mini-demos/component-case/map/map.xhsml

@@ -0,0 +1,33 @@
+<view class="container">
+  <showbox title="地图组件">
+    <box>
+      <view>
+        <map
+          id="mapId"
+          data-testid="mapId"
+          subkey="{{subKey}}"
+          style="width: 100%; height: 300px;"
+          latitude="{{latitude}}"
+          longitude="{{longitude}}"
+          scale="{{18}}"
+          markers="{{markers}}"
+          covers="{{covers}}"
+          enable-3D="{{enable3d}}"
+          show-compass="{{showCompass}}"
+          enable-zoom="{{enableZoom}}"
+          enable-rotate="{{enableRotate}}"
+          enable-satellite="{{enableSatellite}}"
+          enable-traffic="{{enableTraffic}}"
+          enable-overlooking="{{enableOverlooking}}"
+          enable-scroll="{{enableScroll}}"
+          polygons="{{drawPolygon ? polygons : []}}"
+          bindtap="bindtap"
+          bindlabeltap="bindlabeltap"
+          bindmarkertap="bindmarkertap"
+          bindcallouttap="bindcallouttap"
+        >
+        </map>
+      </view>
+    </box>
+  </showbox>
+</view>