使用mui显示百度地图

zh3210576

已于 2022-04-27 21:05:30 修改

阅读量676

点赞数

分类专栏： mui 文章标签：百度

于 2021-11-29 10:22:39 首次发布

本文链接：https://blog.csdn.net/zh3210576/article/details/121603507

版权

mui 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

使用mui显示百度地图

android应用在使用百度地图的时候通常需要配置很多信息，那么mui打包的APK可以直接通过JavaScript的Api实现简单的地图功能

1.百度地图开放平台的秘钥

我们可以直接创建浏览器端的AK
在这里插入图片描述

秘钥即AK，留着备用

2.mui界面设计

在这里插入图片描述
主要功能：
1.显示当前定位（需要真机才有效果）
2.城市搜索
3.选中点的标记

3.对应代码

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<style>
		    body,
		    html,
		    #container {
		        overflow: hidden;
		        width: 100%;
		        height: 100%;
		        margin: 0;
		        font-family: "微软雅黑";
				
		    }
			#content{
				z-index: 999;
				position: absolute;
				background-color: transparent;
				margin-top: 28px;
				margin-left: 10%;
			}
		</style>
		<script src="http://api.map.baidu.com/api?type=webgl&v=3.0&ak=ivyBKb8CFG5kRDmx8Nlkmo12mmk7QX9P"></script>
	</head>

	<body>
		<div class="mui-content" id="content">
			<div style="mui-input-row">
				<input type="input"  placeholder="请输入城市名称" style="width:70%;" id="cityName"/>
				<button class="mui-btn mui-btn-primary" style="margin-top: -4px;" id="search">查 询</button>
			</div>
			<div style="mui-input-row">
				<button class="mui-btn mui-btn-red" style="margin-buttom: 4px;" id="location">定 位</button>
			</div>
		</div>
		<div id="container"></div>	 
		<script>
			var map = new BMapGL.Map('container'); // 创建Map实例
			var gc = new BMapGL.Geocoder();
			//城市名称，需要以 市 结尾，地图级别最大21
			map.centerAndZoom('北京市', 12); // 初始化地图,设置中心点坐标和地图级别
			map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
			map.addEventListener('click', function (e) {
				if(e.latlng.lng != "" && e.latlng.lat != ""){
					map.clearOverlays(); 
					var new_point = new BMapGL.Point(e.latlng.lng,e.latlng.lat);
					var marker = new BMapGL.Marker(new_point);  // 创建标注
					map.addOverlay(marker);              // 将标注添加到地图中
					map.panTo(new_point);  
				}		
			});
			document.getElementById('search').addEventListener('tap',function(){
				var cityName = document.getElementById('cityName').value;
				map.centerAndZoom(cityName+'市', 12);
			});
			function getNowLocation(){	
				var geolocation = new BMapGL.Geolocation();
				geolocation.getCurrentPosition(function(r){
					if(this.getStatus() == BMAP_STATUS_SUCCESS){
						map.clearOverlays(); 
						var mk = new BMapGL.Marker(r.point);
						map.addOverlay(mk);
						map.panTo(r.point);
						//alert('您的位置：' + r.point.lng + ',' + r.point.lat);
						map.setCenter(r.point);
						gc.getLocation(r.point, function(rs) {
							var addComp = rs.addressComponents;
							mui.alert(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);
						});
					}else {
						alert('failed' + this.getStatus());
					}        
				});
			}
			mui.plusReady(function(){
				getNowLocation();
			});
			document.getElementById("location").addEventListener("tap",function(){
				getNowLocation();
			});
		</script>	
	</body>
</html>

PS：
1.真机导入百度地图js 的时候，一定要有http
在这里插入图片描述
2.定位可能会存在一定的误差，估计和坐标系转换有关
3.城市名称需要以 “市” 结尾，如：南京市，南京市市等均为有效
4.支持国内城市的地图显示，城市名称输入有误或超出范围，默认显示为北京市的地图

zh3210576

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用mui显示百度地图

使用mui显示百度地图android应用在使用百度地图的时候通常需要配置很多信息，那么mui打包的APK可以直接通过JavaScript的Api实现简单的地图功能1.百度地图开放平台的秘钥我们可以直接创建浏览器端的AK秘钥即AK，留着备用2.mui界面设计主要功能：1.显示当前定位（需要真机才有效果）2.城市搜索3.选中点的标记3.对应代码<!doctype html><html> <head> <meta charset="u
复制链接

扫一扫