专栏首页猿计划MUI框架中使用百度地图(全网独一份最详细的图文教程)

MUI框架中使用百度地图(全网独一份最详细的图文教程)

MUI框架中使用百度地图(全网独一份最详细的图文教程)

注意事项

如果还没有注册的童鞋可以先去百度地图开放平台注册一下账号,如果不明白可以参考:https://blog.csdn.net/qq_17623363/article/details/103234119

在本教程中就不再说了。

点我进入百度地图开放平台:http://lbsyun.baidu.com/

效果

MUI框架中使用百度地图(全网独一份最详细的图文教程)

一、申请百度地图权限

1、点我进入百度地图开放平台:http://lbsyun.baidu.com/apiconsole/key

2、点击创建应用

3、填入必要的信息,下面将详细的说明获取的过程

  • 应用名称:可以随便写,比较有代表性的;
  • 应用类型:因为是在安卓上开发的,所以使用Android SDK;
  • 启动服务:默认就好;
  • 发布版SHA1:BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58(DCloud公用证书SHA1)
  • 开发版SHA1:BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58(DCloud公用证书SHA1)
  • PackageName:MUI使用HB打包时的安卓包名

Android平台云端打包 - DCloud公用证书(DCloud老版证书):https://ask.dcloud.net.cn/article/68

MUI使用HB打包时的安卓包名:

4、创建成功后的截图

二、配置应用

1、把Android SDK AK或者IOS SDK AK与MUI项目中的manifest.json配置文件中配置百度地图的SDK。

  • 复制刚才创建的AK

检查下代码中是否成功的加入了

如果没有加入的话,需要使用代码加入:

  "Maps": {
            "description": "管理地图插件"
        },
"plugins":{
				"maps":{
					"baidu":{
						"appkey_ios":"Ki7ZsP50R0dqhyMU10zlB2VRKV3oa06n",
						"appkey_android":"Ki7ZsP50R0dqhyMU10zlB2VRKV3oa06n",
						"appkey":"",
						"description":"百度地图"}
						}
			},

三、在页面上使用

项目结构:

废话不多说直接上代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>校园一点通</title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=YqNA3NwCSGF6L2NA5pFAz6mx6nbRRsUI"></script>
		<style type="text/css">
			body,
			html,
			#map {
				width: 100%;
				height: 80%;
				overflow: hidden;
				font-family: "微软雅黑";
			}
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">山建校园地图服务平台</h1>
		</header>

		<div id="map"></div>
		<input type="text" id="address" />
		<button type="button" id="dingwei" style="width: 100%;" class="mui-btn mui-btn-primary mui-btn-outlined">定位</button>
	</body>
	<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
	<script type="text/javascript" charset="utf-8">
		mui.init();
		var map = new BMap.Map("map"); //地图显示位置
		var gc = new BMap.Geocoder(); //将坐标转换成地址
		//页面初始化时
		$(function() {
			//初始化地图 默认加载北京天安门
			var point = new BMap.Point(116.40369689697, 39.914934528088);
			map.centerAndZoom(point, 16); //初始化地图,point为中心点,缩放级别为16
			$("#address").val("默认加载北京天安门,请点击定位按钮生效!")
		})

		//监听定位按钮事件
		$("#dingwei").click(function() {
			//调用定位函数
			getLocation();
		})

		function getLocation() {
			//判断手机浏览器是否支持定位 
			if(navigator.geolocation) {
				var geolocation = new BMap.Geolocation(); //创建定位实例
				geolocation.getCurrentPosition(showPosition, {
					enableHighAccuracy: true
				}); //enableHighAccuracy 要求浏览器获取最佳结果
			} else {
				console.log("不支持定位啦")
				map.addControl(new BMap.GeolocationControl()); //添加定位控件 支持定位
			}
		}

		//获取定位信息
		function showPosition(position) {
			var la = position.latitude;
			var lo = position.longitude;

			//新建中心点 并将地图中心移动过去
			var centerPoint = new BMap.Point(lo, la);
			map.panTo(centerPoint);
			map.setCenter(centerPoint);
			gc.getLocation(centerPoint, function(rs) {
				var addComp = rs.addressComponents;
				var mapAddress = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
				$("#address").val(mapAddress)
			});
			//新建标注
			var mk = new BMap.Marker(centerPoint);
//			mk.disableDragging(); // 不可拖拽
			map.addOverlay(mk);
		}
	</script>

</html>

四、测试效果

因为我是使用的模拟器(MuMu模拟器,还是很好用的)

为了测试效果方面,需要先在模拟器中设置好虚拟位置,设置步骤如下:

  • 1、打开模拟器下角的更多,打开定位
  • 2、输入想定位的地点
  • 3、设置
  • 4、设置成功

然后测试

以上步骤可以重复执行

看到了吧,MuMu模拟器也是使用的百度地图,真有缘呀,hhh

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 剑指Offer LeetCode 面试题39. 数组中出现次数超过一半的数字

    来源:力扣(LeetCode) 链接:https://leetcode-cn.com/problems/shu-zu-zhong-chu-xian-ci-sh...

    TrueDei
  • 牛客网-包含min函数的栈

    定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数(时间复杂度应为O(1))。

    TrueDei
  • 一文搞定插入排序算法

    每次处理就是将无序数列的第一个元素与有序数列的元素从后往前逐个进行比较,找出插入位置,将该元素插入到有序数列的合适位置中。

    TrueDei
  • python学习:如何让你pycharm用起来更舒服,看起来更美观

    世界上最好的 Python 编辑器或 IDE 是什么?炫酷的界面、流畅的体验,我们投 PyCharm 一票,那么你呢?

    python学习教程
  • 【桌面篇】ArchLinux安装kde桌面

    现在你的U盘可以拔掉了,重启后会发现和刚刚没什么区别,还是命令行的界面,别着急现在就带你安装桌面环境。

    huanhao
  • Confluence 6 SQL Server 问题解决

    https://www.cwiki.us/display/CONFLUENCEWIKI/Database+Setup+for+SQL+Server

    HoneyMoose
  • Vuex-安装 原

    Unpkg.com 提供了基于 NPM 的 CDN 链接。以上的链接会一直指向 NPM 上发布的最新版本。您也可以通过 https://unpkg.com/vu...

    tianyawhl
  • Jfinal学习之路---Controller使用

    JFinal 是基于 Java 语言的极速 WEB + ORM 框架,其核心设计目标是开发迅速、代码量少、学习简单、功能强大、轻量级、易扩展、Restful。在...

    用户5166556
  • 深度学习下一个大突破:机器阅读

    【新智元导读】本文作者邓侃认为,机器阅读其实就是自然文本的结构化,而文本摘要和机器翻译在2016年的进展,昭示了机器阅读即将取得的突破。 机器阅读将是深度学习的...

    新智元
  • Caused by: java.lang.IllegalArgumentException: Could not resolve placeholder 'jdbc.username' in stri

    1、启动dubbo的引用dubbo服务时候报下面这个错误,这是由于去找dubbo的发布服务未找到报的错误,所以先启动dubbo的发布服务即可。

    别先生

扫码关注云+社区

领取腾讯云代金券