修改首页样式

pages/home/index.vue

@@ -326,20 +326,18 @@
 			.two {
 
 				.swiper {
-					height: 50vw;
+					height: 48vw;
+					margin: 2vw 0 0 0;
 
 					.swiper-item {
 						display: flex;
-						flex-direction: column;
 						flex-wrap: wrap;
 
 						.list {
 							display: flex;
 							flex-direction: column;
-							justify-content: space-between;
 							align-items: center;
 							width: 20vw;
-							padding: 1vw 0 0 0;
 
 							.image {
 								width: 14vw;

pages/map/index.vue

@@ -1,6 +1,7 @@
 <template>
 	<view class="main">
-		<map class="map" :latitude="latitude" :longitude="longitude" :scale="scale" :markers="covers"></map>
+		<map class="map" :latitude="latitude" :longitude="longitude" :scale="scale" :markers="markers"
+			@callouttap="toTap"></map>
 	</view>
 </template>
 
@@ -11,7 +12,7 @@
 				latitude: 43.3517, // 设置地图的纬度
 				longitude: 125.86854, // 设置地图的经度
 				scale: 13,
-				covers: [{
+				markers: [{
 					id: 0,
 					latitude: 43.34931,
 					longitude: 125.87221,
@@ -45,7 +46,24 @@
 			}
 		},
 		methods: {
-
+			// 点击标记点对应的气泡 播放多种语音类型的讲解
+			toTap(e) {
+				console.log(e);
+				const innerAudioContext = uni.createInnerAudioContext();
+				innerAudioContext.autoplay = true;
+				innerAudioContext.src =
+					'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
+				innerAudioContext.onPlay(() => {
+					console.log('开始播放');
+				});
+				innerAudioContext.onError((res) => {
+					uni.showToast({
+						title: res.errMsg,
+						icon: 'error',
+						duration: 2000
+					});
+				});
+			},
 		}
 	}
 </script>

unpackage/dist/dev/mp-weixin/pages/home/index.wxss

@@ -21,20 +21,18 @@
   padding: 2vw 0 0 0;
 }
 .main .bottom .two .swiper.data-v-71e217db {
-  height: 50vw;
+  height: 48vw;
+  margin: 2vw 0 0 0;
 }
 .main .bottom .two .swiper .swiper-item.data-v-71e217db {
   display: flex;
-  flex-direction: column;
   flex-wrap: wrap;
 }
 .main .bottom .two .swiper .swiper-item .list.data-v-71e217db {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   align-items: center;
   width: 20vw;
-  padding: 1vw 0 0 0;
 }
 .main .bottom .two .swiper .swiper-item .list .image.data-v-71e217db {
   width: 14vw;

unpackage/dist/dev/mp-weixin/pages/map/index.js

@@ -135,7 +135,7 @@ __webpack_require__.r(__webpack_exports__);
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
+/* WEBPACK VAR INJECTION */(function(uni) {
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -147,6 +147,7 @@ exports.default = void 0;
 //
 //
 //
+//
 var _default = {
   data: function data() {
     return {
@@ -155,7 +156,7 @@ var _default = {
       longitude: 125.86854,
       // 设置地图的经度
       scale: 13,
-      covers: [{
+      markers: [{
         id: 0,
         latitude: 43.34931,
         longitude: 125.87221,
@@ -205,9 +206,28 @@ var _default = {
     };
   },
 
-  methods: {}
+  methods: {
+    // 点击标记点对应的气泡 播放多种语音类型的讲解
+    toTap: function toTap(e) {
+      console.log(e);
+      var innerAudioContext = uni.createInnerAudioContext();
+      innerAudioContext.autoplay = true;
+      innerAudioContext.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
+      innerAudioContext.onPlay(function () {
+        console.log('开始播放');
+      });
+      innerAudioContext.onError(function (res) {
+        uni.showToast({
+          title: res.errMsg,
+          icon: 'error',
+          duration: 2000
+        });
+      });
+    }
+  }
 };
 exports.default = _default;
+/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./node_modules/@dcloudio/uni-mp-weixin/dist/index.js */ 2)["default"]))
 
 /***/ }),
 

unpackage/dist/dev/mp-weixin/pages/map/index.wxml

@@ -1 +1 @@
-<view class="main data-v-4219aa94"><map class="map data-v-4219aa94" latitude="{{latitude}}" longitude="{{longitude}}" scale="{{scale}}" markers="{{covers}}"></map></view>
+<view class="main data-v-4219aa94"><map class="map data-v-4219aa94" latitude="{{latitude}}" longitude="{{longitude}}" scale="{{scale}}" markers="{{markers}}" data-event-opts="{{[['callouttap',[['toTap',['$event']]]]]}}" bindcallouttap="__e"></map></view>