uniapp使用h5的map（已弃用）

目前已经启用，当前是前期调用的，要求使用h5本地map宣绒，后放弃了，目前只是写了一个简单的demo，组要是h5和本地的交互

本地html

js 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>本地网页</title>
		<style type="text/css">
			.btn {
				display: block;
				margin: 20px auto;
				padding: 5px;
				background-color: #007aff;
				border: 0;
				color: #ffffff;
				height: 40px;
				width: 200px;
			}

			.btn-red {
				background-color: #dd524d;
			}

			.btn-yellow {
				background-color: #f0ad4e;
			}

			.desc {
				padding: 10px;
				color: #999999;
			}

			#map {
				position: absolute;
				top: 0;
				bottom: 0;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div id="map"></div>

		<p class="desc">web-view 组件加载本地 html 示例，仅在 App 环境下生效。点击下列按钮，跳转至其它页面。</p>

		<p class="desc">网页向应用发送消息。注意：小程序端应用会在此页面后退时接收到消息。</p>
		<div class="btn-list">
			<button class="btn btn-red" type="button" id="postMessage">postMessage</button>
		</div>
		<!-- uni 的 SDK -->
		<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.1/index.js"></script>

		<script src="http://webmap.sf-express.com/api/map?v=3.1&ak=申请的ak"></script>


		<script type="text/javascript">
			var map = ''
			// 接收数据的全局函数（与 uni-app 中 evalJS 调用的名称一致）
			function receiveDataFromApp(data) {
				console.log('收到 App 数据1:', data);

				// 可选：发送数据回 uni-app
				uni.postMessage({
					data: {
						response: 'Data received!'
					}
				});
				//范围自适应
				if (map) {
					var coords = [
						[113.945899, 22.525566],
						[113.940964, 22.529943],
						[113.93914, 22.527132],
						[113.942594, 22.525029]
					];
					new SFMap.Polygon({
						coordinates: coords,
						paint: {
							"fill-color": "#088",
							"fill-opacity": 0.8
						}
					}).addTo(map);
					// 计算bounds
					var bounds = coords.reduce(function(rtn, item) {
						rtn.extend(item);
						return rtn;
					}, new SFMap.LngLatBounds());

					// 地图fitBounds
					if (!bounds.isEmpty()) {
						map.fitBounds(bounds, {
							padding: {
								top: 0,
								bottom: 0,
								left: 300,
								right: 0,
							},
							maxZoom: 14
						});
					}
				}
			}
			map = new SFMap.Map({
				container: 'map',
				center: [113.99709, 22.56859],
				zoom: 9 // starting zoom
			});
			document.addEventListener('UniAppJSBridgeReady', function() {

				console.log("map", map)

				uni.postMessage({
					data: {
						action: 'load'
					}
				});

				document.querySelector('.btn-list').addEventListener('click', function(evt) {
					var target = evt.target;
					if (target.tagName === 'BUTTON') {
						var action = target.getAttribute('data-action');
						switch (action) {
							case 'switchTab':
								uni.switchTab({
									url: '/pages/tabBar/API/API'
								});
								break;
							case 'reLaunch':
								uni.reLaunch({
									url: '/pages/tabBar/API/API'
								});
								break;
							case 'navigateBack':
								uni.navigateBack({
									delta: 1
								});
								break;
							default:
								uni[action]({
									url: '/pages/component/button/button'
								});
								break;
						}
					}
				});
				document.querySelector("#postMessage").addEventListener('click', function() {

					uni.postMessage({
						data: {
							action: 'message'
						}
					});
				})
			});
		</script>
	</body>
</html>

uniapp本地测试页面

js 复制代码

<template>
	<view>
		<web-view style="height: 200px;width: 100%;" src="/hybrid/html/local.html" ref="myWebview" :webview-styles="webviewStyles" @message="getMessage"
			id="webviewId" @load="webLoad"></web-view>
		<button type="default" style="position: fixed;botttom:0;margin-top: 300px;" @click="sendData">发送消息给html</button>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				currentWebview: '',
				webviewStyles: {
					progress: {
						color: '#ffffff'
					},
				}
			}
		},
		onReady() {
			var that = this


			setTimeout(function() {
				that.initWebView()
			}, 1000); //如果是页面初始化调用时，需要延时一下

		},
		methods: {

			initWebView() {
				if (!this.currentWebview) {
					// #ifdef APP-HARMONY
					this.currentWebview = uni.createWebviewContext('webviewId', this);
					// #endif  
					// #ifdef APP-PLUS  
					this.currentWebview = this.$scope.$getAppWebview().children()[0];
					// #endif  

					// #ifdef APP-PLUS
					this.currentWebview.setStyle({
						top: 0,
						height: 300
					})
					// #endif
				}

			},

			webLoad() {
				//微信小程序、支付宝小程序、抖音小程序、QQ小程序、H5
				console.log("-------webLoad----------")
			},
			getMessage(e) {
				console.log("-------getMessage--------")
				uni.showModal({
					content: JSON.stringify(e.detail),
					showCancel: false
				})
				this.initWebView()
			},
			sendData() {
				var data = {
					log: '1',
					lat: '2'
				}
				if (this.currentWebview) {
					if (this.currentWebview.evalJS) {
						this.currentWebview.evalJS(`receiveDataFromApp(${JSON.stringify(data)})`);
					} else {
						console.error(" evalJS 方法不存在");
					}

				} else {
					console.error("WebView 实例 不存在");
				}
				// 方式1：直接调用 WebView 中的全局函数（推荐）
				// webview.evalJS(`receiveDataFromApp(${JSON.stringify(data)})`);

				// 方式2：通过 window 对象传递
				// webview.evalJS(`window.appData = ${JSON.stringify(data)}`);
			}

		}
	}
</script>

<style>

</style>