MUI框架中使用百度地图(全网独一份最详细的图文教程)
时间:2022-07-22
本文章向大家介绍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
- [WCF安全系列]消息的保护等级[上篇]
- QEMU 1: 使用QEMU创建虚拟机
- [WCF安全系列]绑定、安全模式与客户端凭证类型:NetNamedPipeBinding、NetTcpBinding与NetMsmqBinding
- 操作系统级虚拟化概述
- 让javascript中的异步请求同步起来
- [WCF REST] WebHttpBinding与消息编码
- React 概要
- [WCF REST] UriTemplate、UriTemplateTable与WebHttpDispatchOperationSelector
- [WCF REST] WebServiceHost有何特别之处?
- OSX SIP机制的“那些事”
- [WCF REST] 帮助页面与自动消息格式(JSON/XML)选择
- WCF服务端运行时架构体系详解[下篇]
- python和C语言混编的几种方式
- 通过“四大行为”对WCF的扩展[实例篇]
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- java之Object类
- springboot开发之引入资源并实现跳转到登录界面
- java之==操作符和equals操作符
- LeetCode | 24.两两交换链表中的节点
- java之单例设计模式
- Nginx | Nginx的介绍和安装
- 真特么激动第一个爬虫----爬取豆瓣电影top250
- LeetCode | 141.环形链表
- LeetCode | 20.有效的括号
- springboot开发之实现登录功能
- springboot开发之国际化(中英文切换)
- LeetCode | 225.用队列实现栈
- springboot开发之显示员工信息
- LeetCode | 232.用栈实现队列
- springboot开发之thymeleaf页面公共元素的抽取