test: 测试webview跳转

api/config.js

@@ -3,6 +3,7 @@ const config = {
 	BASE_URL: 'https://feiniaotech-dev.sysuimars.cn/', //开发环境
 	BASE_URL_MINI: 'https://feiniaotech-dev.sysuimars.cn/mini/',
 	BASE_URL_PRO: 'https://birdseye-api.feiniaotech.sysuimars.cn/',//生产环境
+	H5_SRC: "https://feiniao-mini-h5-dev.sysuimars.cn/index.html#/"
 }
 
 export default config

manifest.json

@@ -61,7 +61,10 @@
 		  "permission": {
 		    "scope.userLocation": {
 		      "desc": "需要获取您的位置以显示地图"
-		    }
+		    },
+			"scope.userInfo": {
+			  "desc": "用于登录功能"
+			}
 		  },
         "usingComponents" : true
     },

pages.json

@@ -57,7 +57,7 @@
 			"path" : "pages/tabBar/home/subPages/gardenMap",
 			"style" : 
 			{
-				"navigationBarTitleText" : ""
+				"navigationBarTitleText" : "有味地图"
 			}
 		},
 		{

pages/tabBar/home/home.vue

@@ -17,6 +17,7 @@
 			    :include-points="includePoints"
 				:enable-poi="false"
 				:enable-traffic="false"
+				:enable-satellite="true"
 				:enable-building="false"
 			    show-location
 			    style="width: 100%; height: 280rpx;"

pages/tabBar/home/subPages/allGardenMap.vue

@@ -1,221 +1,60 @@
 <template>
-  <view>
-    <map
-      id="mapId"
-      :latitude="latitude"
-      :longitude="longitude"
-	  :layers="layers"
-      @markertap="onMarkerTap"
-      @callouttap="onCalloutTap"
-      @labeltap="onLabelTap"
-      :markers="markers"
-      :include-points="includePoints"
-      show-location
-      style="width: 100%; height: 100vh;"
-    >
-	 <custom-layer
-	      id="tdtLayer"
-	      width="350"
-	      height="800"
-	      is-transparent
-	      type="raster"
-	      :src="getTileUrl"
-	    ></custom-layer>
-	</map>
-  </view>
+	<view>
+		<!-- <web-view src='https://feiniao-mini-h5-dev.sysuimars.cn/youwei/#/gardenMap?userId=91429'
+			@message="handleMapEvent"></web-view> -->
+			
+			<web-view src='http://localhost:8081/#/gardenMap?userId=91754&token=034d7cf5-25fc-42d3-993e-460120419e5a'
+				@message="handleMapEvent" @onPostMessage="handleHashChange"></web-view>
+	</view>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
-
-const latitude = ref(23.584863449735067)
-const longitude = ref(113.61702297075017)
-
-const markers = ref([])
-const includePoints = ref([])
-const mapCtx = ref(null)
-const img = ref('../../../../static/map/point.png')
-
-const TDT_KEY = 'e95115c454a663cd052d96019fd83840'
-
-const getTileUrl = ({ x, y, z }) => {
-  const s = Math.floor(Math.random() * 8) // 0-7
-  return `https://t1.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX=${z}&TILEROW=${y}&TILECOL=${x}&tk=${TDT_KEY}`
-}
-// const layers = [
-//         {
-//           // 添加腾讯地图默认底图（可选）
-//           type: 'vector',
-//           subdomains: ['0', '1', '2'],
-//           url: 'https://{s}.map.qq.com/tile/{z}/{x}/{y}',
-//           zIndex: 0,
-//         },
-//         {
-//           // 叠加天地图影像（WMTS）
-//           type: 'wmts',
-//           layer: 'img',
-// 		  url: 'https://t{s}.tianditu.gov.cn/img_c/wmts?tk=e95115c454a663cd052d96019fd83840&service=wmts&request=GetTile&version=1.0.0&layer=img&style=default&tilematrixset=c&format=tiles',
-//           // url: 'https://t{s}.tianditu.gov.cn/img_c/wmts?tk=e95115c454a663cd052d96019fd83840',
-//           tileMatrixSet: 'c',
-//           subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
-//           zIndex: 1,
-//         }
-//       ]
-	  
-// 或者使用WMTS方式
-const layers = ref([
-  {
-    type: 'wmts',
-    layer: 'img',
-    url: 'https://t{s}.tianditu.gov.cn/img_c/wmts?tk=e95115c454a663cd052d96019fd83840',
-    tileMatrixSet: 'c',
-    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
-    zIndex: 99
-  }
-])
-
-onMounted(() => {
-  // #ifdef MP-WEIXIN
-  mapCtx.value = uni.createMapContext('mapId')
-  mapCtx.value.on('markerClusterClick', res => {
-    console.log('markerClusterClick', res)
-  })
-  
-  bindEvent()
-  // #endif
-  
-  
-})
-
- function toPage(path) {
-	 uni.navigateTo({
-	 	url: `/pages/tabBar/home/subPages/${path}`
-	 });
- }
-
-const bindEvent = () => {
-  // #ifdef MP-WEIXIN
-  mapCtx.value.initMarkerCluster({
-    enableDefaultStyle: false,
-    zoomOnClick: true,
-    gridSize: 60,
-    complete(res) {
-      console.log('initMarkerCluster', res)
-    }
-  })
-  
-  addMarkers()
-  
-  mapCtx.value.on('markerClusterCreate', res => {
-    console.log('clusterCreate', res)
-    const clusters = res.clusters
-    const newMarkers = clusters.map(cluster => {
-      const { center, clusterId, markerIds } = cluster
-      return {
-        ...center,
-        width: 0,
-        height: 0,
-        clusterId, // 必须
-        label: {
-          content: markerIds.length + '',
-          fontSize: 20,
-          width: 30,
-          height: 30,
-          bgColor: '#FFCB3C',
-          borderRadius: 30,
-          textAlign: 'center',
-          anchorX: 0,
-          anchorY: -30,
-        }
-      }
-    })
-    mapCtx.value.addMarkers({
-      markers: newMarkers,
-      clear: false,
-      complete(res) {
-        console.log('clusterCreate addMarkers', res)
-      }
-    })
-  })
-  // #endif
-}
-
-const addMarkers = () => {
-  const marker = {
-    id: 1,
-    iconPath: img.value,
-    width: 30,
-    height: 30,
-    joinCluster: true, // 指定了该参数才会参与聚合
-    label: {
-      width: 50,
-      height: 30,
-      borderWidth: 1,
-      borderRadius: 4,
-      bgColor: '#FFCB3C',
-	  anchorX: -26,
-	  anchorY: -60,
-      content: ''
-    }
-  }
-
-  const positions = [
-    { latitude: 23.584863449735067, longitude: 113.61702297075017},
-    { latitude: 23.099994, longitude: 113.324520 },
-    { latitude: 23.099994, longitude: 113.322520 },
-    { latitude: 23.099994, longitude: 113.326520 },
-    { latitude: 23.096994, longitude: 113.329520 }
-  ]
-  
-  const newMarkers = []
-  positions.forEach((p, i) => {
-    const newMarker = {...marker, ...p}
-    newMarker.id = i + 1
-    newMarker.label.content = `果园 ${i + 1}`
-    newMarkers.push(newMarker)
-  })
-  
-  // #ifdef MP-WEIXIN
-  mapCtx.value.addMarkers({
-    markers: newMarkers,
-    clear: false,
-    complete(res) {
-      console.log('addMarkers', res)
-    }
-  })
-  // #else
-  // 非微信平台直接设置 markers
-  markers.value = markers.value.concat(newMarkers)
-  // 更新包含的点
-  includePoints.value = markers.value.map(marker => ({
-    latitude: marker.latitude,
-    longitude: marker.longitude
-  }))
-  // #endif
-}
-
-const removeMarkers = () => {
-  // #ifdef MP-WEIXIN
-  mapCtx.value.addMarkers({
-    clear: true,
-    markers: []
-  })
-  // #else
-  markers.value = []
-  // #endif
-}
-
-const onMarkerTap = (e) => {
-  console.log('@@ markertap', e)
-  
-  toPage('gardenMap')
-}
-
-const onCalloutTap = (e) => {
-  console.log('@@ onCalloutTap', e)
-}
-
-const onLabelTap = (e) => {
-  console.log('@@ labletap', e)
-}
+import config from "@/api/config.js"
+	import {
+		onMounted
+	} from 'vue';
+
+	const handleBack = () => {
+		uni.navigateBack();
+	};
+	
+	function handleHashChange(e) {
+		console.log('handleHashChange', e)
+	    const hash = e.detail.url.split("#")[1];
+	    if (hash && hash.startsWith("jump=")) {
+	      const path = decodeURIComponent(hash.split("=")[1]);
+	      uni.navigateTo({
+	        url: path, // 如 "/pages/home/home"
+	      });
+	    }
+	  }
+	
+	function  randomIndexName(){
+		const randomNum = Math.floor(Math.random() * 10) + 1; // 生成1到10之间的随机数
+		let v = new Date().getTime()
+		let filename = `index${randomNum}.html?v=${v}`
+		return filename;
+	  }
+
+	const handleMapEvent = (e) => {
+		console.log('地图点击坐标:', e);
+		const data = e.detail.data;
+		switch (data.type) {
+			case 'map-click':
+				console.log('地图点击坐标:', data.lat, data.lng);
+				break;
+			case 'marker-click':
+				console.log('标记点点击:', data.markerId);
+				break;
+		}
+	}
+	// 动态注入 JS 监听（兼容性方案）
+	// onMounted(() => {
+	//   window.addEventListener('message', (e) => {
+	// 	  alert('eee', e.data)
+	//     if (e.data && e.data.type === 'from-h5') {
+	//       console.log('H5页面消息2222:', e.data.payload);
+	//     }
+	//   });
+	// });
 </script>

pages/tabBar/home/subPages/gardenMap.vue

@@ -1,325 +1,39 @@
 <template>
-  <view class="garden-page">
-    <map
-      id="mapId"
-      :latitude="latitude"
-      :longitude="longitude"
-	  :layers="layers"
-      @markertap="onMarkerTap"
-      @callouttap="onCalloutTap"
-      @labeltap="onLabelTap"
-      :markers="markers"
-      :include-points="includePoints"
-	  :enable-satellite="true"
-      show-location
-      style="width: 100%; height: 100vh;"
-    ></map>
-	
-	<view class="top-mask"></view>
-	
-	<view class="garden-info">
-		<view class="panel-title">
-			<view class="title-l">
-				<image class="garden-img" :src="`${config.BASIC_IMG}home/garden.png`" mode=""></image>
-				<view class="title-info">
-					<view class="title-garden">
-						从化荔枝博览园
-					</view>
-					<view class="btn-second">
-						有味指数
-						<text>4.5分</text>
-					</view>
-				</view>
-			</view>
-			<view class="title-r">
-				<text class="add-text">进店</text>
-			</view>
-		</view>
+	<view>
+		<web-view src="http://localhost:8081/#/gardenMap?point=113.1093017627431,22.574540836684672&userId=91754"
+			@message="handleMapEvent"></web-view>
+
 	</view>
-  </view>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
-	import config from "@/api/config.js"
-
-const latitude = ref(23.584863449735067)
-const longitude = ref(113.61702297075017)
-
-const markers = ref([])
-const includePoints = ref([])
-const mapCtx = ref(null)
-const img = ref('../../../../static/map/tree.png')
-// const layers = [
-//         {
-//           // 添加腾讯地图默认底图（可选）
-//           type: 'vector',
-//           subdomains: ['0', '1', '2'],
-//           url: 'https://{s}.map.qq.com/tile/{z}/{x}/{y}',
-//           zIndex: 0,
-//         },
-//         {
-//           // 叠加天地图影像（WMTS）
-//           type: 'wmts',
-//           layer: 'img',
-// 		  url: 'https://t{s}.tianditu.gov.cn/img_c/wmts?tk=e95115c454a663cd052d96019fd83840&service=wmts&request=GetTile&version=1.0.0&layer=img&style=default&tilematrixset=c&format=tiles',
-//           // url: 'https://t{s}.tianditu.gov.cn/img_c/wmts?tk=e95115c454a663cd052d96019fd83840',
-//           tileMatrixSet: 'c',
-//           subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
-//           zIndex: 1,
-//         }
-//       ]
-	  
-	  const tiandituKey = 'e95115c454a663cd052d96019fd83840'
-const layers = ref([
-  {
-    // 腾讯地图矢量底图
-    type: 'vector',
-    subdomains: ['0', '1', '2'],
-    url: 'https://{s}.map.qq.com/tile/{z}/{x}/{y}',
-    zIndex: 0
-  },
-  {
-    // 天地图影像底图
-    type: 'raster',
-    tileSize: 256,
-    tiles: [
-      `https://t0.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
-      `https://t1.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
-      `https://t2.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
-      `https://t3.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
-      `https://t4.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
-      `https://t5.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
-      `https://t6.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
-      `https://t7.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`
-    ],
-    zIndex: 1
-  }
-])
-
-onMounted(() => {
-  // #ifdef MP-WEIXIN
-  mapCtx.value = uni.createMapContext('mapId')
-  mapCtx.value.on('markerClusterClick', res => {
-    console.log('markerClusterClick', res)
-  })
-  
-  setTimeout(() => {
-      mapCtx.value.getMapProperties({
-        success: (res) => {
-          console.log('地图属性:', res)
-        }
-      })
-    }, 1000)
-  
-  bindEvent()
-  // #endif
-  
-  
-})
-
-const bindEvent = () => {
-  // #ifdef MP-WEIXIN
-  mapCtx.value.initMarkerCluster({
-    enableDefaultStyle: false,
-    zoomOnClick: true,
-    gridSize: 60,
-    complete(res) {
-      console.log('initMarkerCluster', res)
-    }
-  })
-  
-  addMarkers()
-  
-  mapCtx.value.on('markerClusterCreate', res => {
-    console.log('clusterCreate', res)
-    const clusters = res.clusters
-    const newMarkers = clusters.map(cluster => {
-      const { center, clusterId, markerIds } = cluster
-      return {
-        ...center,
-        width: 0,
-        height: 0,
-        clusterId, // 必须
-        label: {
-          content: markerIds.length + '',
-          fontSize: 20,
-          // width: 30,
-          height: 30,
-		  color: "#fff",
-          bgColor: '#FFCB3C',
-          borderRadius: 30,
-          textAlign: 'center',
-          anchorX: 0,
-          anchorY: -30,
-        }
-      }
-    })
-    mapCtx.value.addMarkers({
-      markers: newMarkers,
-      clear: false,
-      complete(res) {
-        console.log('clusterCreate addMarkers', res)
-      }
-    })
-  })
-  // #endif
-}
-
-const addMarkers = () => {
-  const marker = {
-    id: 1,
-    iconPath: img.value,
-    width: 40,
-    height: 40,
-    joinCluster: true, // 指定了该参数才会参与聚合
-    label: {
-      // width: 50,
-      height: 30,
-	  color: "#fff",
-      // borderWidth: 1,
-      // borderRadius: 4,
-      // bgColor: '#FFCB3C',
-	  anchorX: -26,
-	  anchorY: -60,
-      content: ''
-    }
-  }
-
-  const positions = [
-    { latitude: 23.584863449735067, longitude: 113.61702297075017},
-    { latitude: 23.099994, longitude: 113.324520 },
-    { latitude: 23.099994, longitude: 113.322520 },
-    { latitude: 23.099994, longitude: 113.326520 },
-    { latitude: 23.096994, longitude: 113.329520 }
-  ]
-  
-  const newMarkers = []
-  positions.forEach((p, i) => {
-    const newMarker = {...marker, ...p}
-    newMarker.id = i + 1
-    newMarker.label.content = `果树名字 ${i + 1}`
-    newMarkers.push(newMarker)
-  })
-  
-  // #ifdef MP-WEIXIN
-  mapCtx.value.addMarkers({
-    markers: newMarkers,
-    clear: false,
-    complete(res) {
-      console.log('addMarkers', res)
-    }
-  })
-  // #else
-  // 非微信平台直接设置 markers
-  markers.value = markers.value.concat(newMarkers)
-  // 更新包含的点
-  includePoints.value = markers.value.map(marker => ({
-    latitude: marker.latitude,
-    longitude: marker.longitude
-  }))
-  // #endif
-}
-
-const removeMarkers = () => {
-  // #ifdef MP-WEIXIN
-  mapCtx.value.addMarkers({
-    clear: true,
-    markers: []
-  })
-  // #else
-  markers.value = []
-  // #endif
-}
-
-const onMarkerTap = (e) => {
-  console.log('@@ markertap', e)
-}
-
-const onCalloutTap = (e) => {
-  console.log('@@ onCalloutTap', e)
-}
-
-const onLabelTap = (e) => {
-  console.log('@@ labletap', e)
-}
-</script>
-
-<style lang="scss" scoped>
-	.garden-page {
-		height: 100vh;
-		width: 100%;
-		position: relative;
-		
-		.top-mask {
-			position: absolute;
-			z-index: 1;
-			top: 0%;
-			left: 0%;
-			width: 100%;
-			height: 464rpx;
-			pointer-events: none;
-			background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
-		}
-		.garden-info {
-			position: absolute;
-			z-index: 2;
-			top: 0%;
-			left: 0%;
-			width: 100%;
-			.panel-title {
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				padding: 24rpx;
-			
-				.title-l {
-					flex: 1;
-					display: flex;
-					align-items: center;
-			
-					.garden-img {
-						width: 100rpx;
-						height: 100rpx;
-						border-radius: 10rpx;
-					}
-			
-					.title-info {
-						padding-left: 20rpx;
-			
-						.title-garden {
-							color: #fff;
-							font-size: 28rpx;
-							font-weight: 600;
-							padding-bottom: 10rpx;
-						}
-			
-						.btn-second {
-							padding: 0 30rpx;
-							border-radius: 40rpx;
-							font-size: 24rpx;
-							color: #F3C11D;
-							border: 2rpx solid #F3C11D;
-							background: rgba(255, 217, 94, 0.28);
-							height: 42rpx;
-							line-height: 40rpx;
-						}
-					}
-				}
-			
-				.title-r {
-					display: flex;
-					font-size: 24rpx;
-					padding: 8rpx 22rpx;
-					background: #FFFFFF;
-					border-radius: 30rpx;
-			
-					.add-text {
-						padding-left: 6rpx;
-						font-weight: 600;
-					}
-				}
-			}
+	import {
+		onMounted
+	} from 'vue';
+
+	const handleBack = () => {
+		uni.navigateBack();
+	};
+
+	const handleMapEvent = (e) => {
+		const data = e.detail.data;
+		console.log('地图点击坐标:', data);
+		switch (data.type) {
+			case 'map-click':
+				console.log('地图点击坐标:', data.lat, data.lng);
+				break;
+			case 'marker-click':
+				console.log('标记点点击:', data.markerId);
+				break;
 		}
 	}
-</style>
+	// 动态注入 JS 监听（兼容性方案）
+	// onMounted(() => {
+	//   window.addEventListener('message', (e) => {
+	// 	  alert('eee', e.data)
+	//     if (e.data && e.data.type === 'from-h5') {
+	//       console.log('H5页面消息2222:', e.data.payload);
+	//     }
+	//   });
+	// });
+</script>