uniapp在H5和App使用高德地图输入提示后查询的功能

创建Key 选中Web(JS API)

在根目录下的static/html创建Amap.html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<title>手动定位</title>

		<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />
		<script type="text/javascript">
			window._AMapSecurityConfig = {
				securityJsCode: "你的安全密钥",
			};
		</script>
		<script type="text/javascript"
			src="https://webapi.amap.com/maps?v=1.4.15&key=你的Key&plugin=AMap.Autocomplete,AMap.PlaceSearch">
		</script>
		<!-- 只对App有效 -->
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
		</script>
	</head>

	<body>
		<div id="container"></div>
		<div id="myPageTop">
			<table>
				<tr>
					<td>
						<label>请输入关键字：</label>
					</td>
				</tr>
				<tr>
					<td>
						<input id="tipinput" />
					</td>
				</tr>
			</table>
		</div>

		<script type="text/javascript">
			//地图加载
			var map = new AMap.Map("container", {
				resizeEnable: true
			});
			//输入提示
			var autoOptions = {
				input: "tipinput"
			};
			var auto = new AMap.Autocomplete(autoOptions);
			var placeSearch = new AMap.PlaceSearch({
				map: map
			}); //构造地点查询类
			AMap.event.addListener(auto, "select", select); //注册监听，当选中某条记录时会触发
			function select(e) {
				placeSearch.setCity(e.poi.adcode);
				placeSearch.search(e.poi.name); //关键字查询查询
			}

            // 点击marker触发事件
			AMap.event.addListener(placeSearch, 'markerClick', markerClick)

			function markerClick(e) {
				// #ifdef H5
				window.parent.postMessage({
					data: e.data
				})
				// #endif
				
				// #ifdef APP-PLUS
				uni.postMessage({
					data: e.data
				})
				// #endif 
				
			}
		</script>
	</body>
</html>

在vue文件使用web浏览器组件引入

<template>
	<view style="width: 100%; height: calc(100vh - 44px)">
		<web-view @message="message" src="/static/html/Amap.html" :update-title="false"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},

		onShow() {
			// #ifdef H5
			window.addEventListener("message", this.receiveMessage, false);
			// #endif
		},
		onHide() {},

		onUnload() {
			// #ifdef H5
			window.removeEventListener("message", this.receiveMessage)
			// #endif
		},

		onLoad(e) {
		},
		methods: {
            // H5端的方法
			receiveMessage(event) {
				let data = event.data.data
				console.log("data==",data);
				if (data?.id) {
					// 在这里处理你的逻辑即可
				}
			},

            // App端的方法
			message(e) {
				let data = e.detail.data[0]
				if (data?.id) {
					// 在这里处理你的逻辑即可
				}
			}
		},
	}
</script>


<style lang="scss" scoped>
</style>

效果图

uniapp在H5和App使用高德地图输入提示后查询的功能

悦读