显示地图

miniapp/pages/yuecai/restaurant/detail/index.vue

@@ -8,9 +8,14 @@
     <view class="col-info-d t-c m-b-30">
       <u-parse :content="detailVO.content"></u-parse>
     </view>
-    <detailBottom type="restaurant" :articleId.sync="detailVO.id" :liked.sync="detailVO.liked" :collected.sync="detailVO.collected"
-      :views.sync="detailVO.views" :likeNum.sync="detailVO.likeNum" :collectNum.sync="detailVO.collectNum"
-      @doRefresh="getDetail"></detailBottom>
+    <view v-if="detailVO && detailVO.id && detailVO.latitude && detailVO.longitude" class="width-100 m-b-20"
+      style="height: 250px;">
+      <map id="map" class="width-100 height-100" :show-location="true" :latitude="detailVO.latitude"
+        :longitude="detailVO.longitude"></map>
+    </view>
+    <detailBottom type="restaurant" :articleId.sync="detailVO.id" :liked.sync="detailVO.liked"
+      :collected.sync="detailVO.collected" :views.sync="detailVO.views" :likeNum.sync="detailVO.likeNum"
+      :collectNum.sync="detailVO.collectNum" @doRefresh="getDetail"></detailBottom>
   </view>
 </template>
 
@@ -23,15 +28,79 @@
     data() {
       return {
         detailVO: {},
+        //
+        mapDom: null,
       }
     },
+    onReady() {},
+
     methods: {
+      createMap() {
+        this.mapDom = uni.createMapContext("map", this);
+
+        // 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
+        this.mapDom.initMarkerCluster({
+          enableDefaultStyle: false,
+          zoomOnClick: true,
+          gridSize: 60,
+          complete(res) {
+            console.log('initMarkerCluster', res)
+          }
+        });
+
+        this.mapDom.on("markerClusterCreate", (e) => {
+          console.log("markerClusterCreate", e);
+        });
+      },
+      addMarkers(name, latitude, longitude) {
+        const positions = [{
+          latitude: latitude,
+          longitude: longitude,
+          name: name
+        }]
+
+        const markers = []
+
+        positions.forEach((p, i) => {
+          console.log(i)
+          markers.push(
+            Object.assign({}, {
+              id: i + 1,
+              // iconPath: img,
+              // width: 50,
+              // height: 50,
+              joinCluster: true, // 指定了该参数才会参与聚合
+              // label: {
+              //   // width: 50,
+              //   // height: 30,
+              //   borderWidth: 1,
+              //   borderRadius: 10,
+              //   padding: 5,
+              //   bgColor: '#ffffff',
+              //   content: p.name
+              // }
+            }, p)
+          )
+        })
+        this.mapDom.addMarkers({
+          markers,
+          clear: false,
+          complete(res) {
+            console.log('addMarkers', res)
+          }
+        })
+      },
       getDetail() {
         this.$u.api.getRestaurantDetail(this.detailVO.id).then(res => {
           if (res.data.content) {
             res.data.content = decodeURIComponent(res.data.content);
           }
           this.detailVO = res.data || {}
+          if (this.detailVO && this.detailVO.id && this.detailVO.latitude && this.detailVO.longitude) {
+            this.createMap();
+            this.addMarkers(this.detailVO.name, res.data.latitude, res.data.longitude)
+          }
+
           //
           uni.setNavigationBarTitle({
             title: res.data.name || ''
@@ -54,11 +123,11 @@
     color: #65371b;
     margin-bottom: 20px;
   }
+
   .time {
     font-size: 14px;
     color: #787878;
     font-weight: 300;
     padding-bottom: 10px;
   }
-  
 </style>