巫溪

src/project/wuxi/AppMeeting/AppCheckInfo.vue

@@ -21,67 +21,66 @@
           <p>春申大道421号</p>
         </div>
       </div>
-      <div class="map-info">
-        <!-- <ai-t-map :map.sync="map" ref="AiTMap" :lib.sync="mapLib" @loaded="onMapInit" /> -->
-        <!-- <ai-map class="eventMap" :map.sync="map" :lib.sync="AMap"/> -->
-        <div id="map" style="width: 100%; height: 280px;"></div>
-        <!-- <ai-map :map.sync="map" :lib.sync="AMap"/> -->
-      </div>
+      <AiMap class="map-info" :map.sync="amap" :lib.sync="mapLib" />
       <div class="bottom-bg"></div>
     </div>
   </div>
 </template>
 
 <script>
-import AMapLoader from '@amap/amap-jsapi-loader'
+
 export default {
   name: 'CheckInfo',
   appName: '入住信息',
-
   data() {
     return {
-      map: null,
-      AMap: null,
+      amap: null,
+      mapLib: null,
+      lat: '31.39439',
+      lng: '109.559364',
+      address: '水韵酒店'
     }
   },
 
   mounted() {
-    this.$nextTick(() => {
-      this.initMap()
-    })
+    document.title = '入住信息'
+    this.initMap()
   },
 
   methods: {
     initMap() {
-      AMapLoader.load({
-        key: 'b553334ba34f7ac3cd09df9bc8b539dc',
-        version: '2.0',
-        plugins: ['AMap.Geocoder'],
-      }).then(AMap => {
-        let map = new AMap.Map('map', {
-          resizeEnable: true,
-          center: [109.559364, 31.39439],
-          zoom: 18,
+      if(this.mapLib){
+        let pos = new this.mapLib.LngLat(this.lng, this.lat)
+        var marker = new this.mapLib.Marker({
+          position: pos,
+          anchor: 'bottom-center',
+          content: `<div class="marker">${this.address}</div>`,
         })
-        var icon = new AMap.Icon({
-          image: "https://cdn.cunwuyun.cn/dvcp/h5/Location2.png",
-          size: new AMap.Size(24, 24)
-        });
-        var marker = new AMap.Marker({
-          position: map.getCenter(),
-          icon: icon,
-          offset: new AMap.Pixel(-13, -30)
-        });
-        marker.setMap(map);
-        marker.setTitle('水韵酒店');
-        marker.setLabel({
-          offset: new AMap.Pixel(-5, 0),  //设置文本标注偏移量
-          content: "<div class='info'>水韵酒店</div>", //设置文本标注内容
-          direction: 'top' //设置文本标注方位
-        });
-      })
+        this.amap.on('click', () => {
+          this.openMap()
+        })
+        this.amap.add(marker)
+        this.amap.setFitView()
+
+      }else {
+        setTimeout(() => {
+          this.initMap()
+        },3000)
+      }      
+      
     },
-  }
+    openMap() {
+      var userAgent = navigator.userAgent.toLowerCase();
+        if (userAgent.indexOf('micromessenger') !== -1) {
+          // return this.$u.toast("请点击右上角[...],在浏览器打开。")
+          this.$confirm('请点击右上角[...],在浏览器打开。', '提示')
+        } else {
+          window.location.href = `amapuri://route/plan/?sourceApplication=amap&did=&dlat=${this.lat}&dlon=${this.lng}&dname=巫溪县水韵酒店&dev=0&t=0`
+        }
+
+    }
+
+  },
 }
 </script>
 
@@ -145,22 +144,45 @@ uni-page-body{
       position: fixed;
       bottom: 0;
       left: 0;
+      pointer-events: none;
     }
   }
 
-  ::v-deep .amap-icon {
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  }
+  ::v-deep .marker {
+    border-radius: 52px;
+    background: #F46159;
+    color: #fff;
+    font-size: 22px;
+    padding: 4px 16px;
+    white-space: nowrap;
+    position: relative;
 
-  ::v-deep .amap-marker-label {
-    border: 1px solid #fff;
-    font-size: 28px;
-    line-height: 48px;
-    padding: 0 16px;
-    border-radius: 4px;
+    &:before {
+      position: absolute;
+      left: calc(50% - 30px);
+      bottom: -34px;
+      z-index: -1;
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      background-color: #F46159;
+      animation: mapWarn 1s ease-out 0s infinite;
+      content: " ";
+    }
+
+    &:after {
+      position: absolute;
+      display: block;
+      content: " ";
+      bottom: -8px;
+      left: 50%;
+      transform: translateX(-50%);
+      border: 8px solid transparent;
+      border-bottom: none;
+      border-top-color: #F46159;
+      height: 0;
+      width: 0;
+    }
   }
  
 }