uniapp在H5和App使用百度地图的关键字提示输入、获取地图信息

原创

已于 2024-06-03 18:24:28 修改 · 597 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #百度

于 2024-05-27 10:14:27 首次发布

登录百度账号 应用类别选择（浏览器端）

在根目录下的static/html创建Bmap.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">
		<style type="text/css">
			body,
			html {
				width: 100%;
				height: 100%;
				margin: 0;
				font-family: "微软雅黑";
				font-size: 14px;
			}

			#l-map {
				height: 100%;
				width: 100%;
			}

			#myPageTop {

				position: absolute;
				top: 5px;
				left: 10px;
				background: #fff none repeat scroll 0 0;
				border: 1px solid #ccc;
				padding: 6px;
				font-family: "Microsoft Yahei", "΢���ź�", "Pinghei";
				font-size: 14px;
			}

			#r-result {
				position: absolute;
				top: 1px;
				right: 10px;
				width: 100%;
			}

			.container {
				width: 130px;
				background-color: #fff;
				position: absolute;
				top: 5px;
				right: 10px;
				border-radius: 10px;
				overflow: hidden;
				padding: 6px;

			}

			.container .row2 {
				margin: 6px 0;
			}

			.container .row3 {
				text-align: center;
			}
		</style>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的ak">
		</script>
		<!-- 只对App有效 -->
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
		</script>
		<title>