利用HBuilder开发基于MUI的H5+ app中使用百度地图定位功能
定位功能有两种方法:
首先要初始化内置地图:
var map = new plus.maps.Map("map");
这里黄色的map是html里面的id:
<div id="map">地图加载中...</div>
1、调用GPS定位API(注意,使用了baidu和bd09ll参数,无需转换坐标)
plus.geolocation.getCurrentPosition(function(p) {
console.log(p.addresses);
console.log( p.coords.longitude);
console.log( p.coords.latitude);
var gpsPoint = new plus.maps.Point( p.coords.longitude, p.coords.latitude);
map.centerAndZoom(gpsPoint, 19);
}, function(e) {}, {
provider: 'baidu',
coordsType: 'bd09ll'
});
2、使用h5+内置地图进行定位。
map.getUserLocation(function(state, pos) {
console.log(JSON.stringify(pos));
if(0 == state) {
map.centerAndZoom(pos, 16);
plus.maps.Map.reverseGeocode(pos, {}, function(event) {
var address = event.address; // 转换后的地理位置
var point = event.coord; // 转换后的坐标信息
var coordType = event.coordType; // 转换后的坐标系类型
alert("Address:" + address);
console.log(JSON.stringify(point));
console.log(coordType);
}, function(e) {
alert("Failed:" + JSON.stringify(e));
});
}
});
扫一扫关注,一起学编程:

利用HBuilder开发基于MUI的H5+ app中使用百度地图定位功能的更多相关文章
- 【MUI】百度地图定位功能
博主最近进行一款APP开发,需要用到定位功能,经过一番折腾,终于搞定,不废话,代码如下 mui.plusReady(function() { var longitude, latitude; //va ...
- MUI框架---实现百度地图定位功能
1 2 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= ...
- mui --- 怎么获取百度地图定位功能
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- Android 百度地图开发(一)--- 申请API Key和在项目中显示百度地图
标签: Android百度地图API Key 分类: Android 百度地图开发(2) 最近自己想研究下地图,本来想研究google Map,但是申请API key比较坑爹,于是从百度地 ...
- 基于mui的H5套壳APP开发web框架分享
前言 创建一个main主页面,只有主页面有头部.尾部,中间内容嵌入iframe内容子页面,如果在当前页面进行跳转操作,也是在iframe中进行跳转,而如果点击尾部按钮切换模块.页面,那就切换ifram ...
- Android开发之清除缓存功能实现方法,可以集成在自己的app中,增加一个新功能。
作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 Android开发之清除缓存功能实现方法,可以集成在自己的app中,增加一个新功能. 下面是一个效果图 ...
- 移动端app跳转百度地图
http://lbsyun.baidu.com/index.php?title=uri/guide/helloworld(百度地图调起URI API)开发者只需按照接口规范构造一条标准的URI,便可在 ...
- Android 百度地图定位(手动+自动) 安卓开发教程
近由于项目需要,研究了下百度地图定位,他们提供的实例基本都是用监听器实现自动定位的.我想实现一种效果:当用户进入UI时,不定位,用户需要定位的时候,自己手动点击按钮,再去定位当前位置. 经过2天研究 ...
- 客户端相关知识学习(一)之混合开发,为什么要在App中使用H5页面以及应用场景、注意事项
混合开发 随着移动互联网的高速发展,常规的开发速度已经渐渐不能满足市场需求.原生H5混合开发应运而生,目前,市场上许多主流应用都有用到混合开发,例如支付宝.美团等.下面,结合我本人的开发经验,简单谈一 ...
随机推荐
- 有人说,即使没有JavaScript,你也可以做网页。在纯HTML
有人说,即使没有JavaScript,你也可以做网页.在纯HTML +服务器端语言理论中也可以完成所有功能,那么,为什么以及在哪里存在JavaScript? JS,全称JavaScript 在 ...
- 第二章 向量(b)可扩充向量
- attenuation
attenuation - 必应词典 美[əˌtenjʊ'eɪʃ(ə)n]英[əˌtenjʊ'eɪʃ(ə)n] n.减弱:稀释:[物]衰减:变细 网络衰减量:衰减作用:衰减值
- Unity之Application.runInBackground = true
默认是False, 设置 Application.runInBackground = true; 则 void OnApplicationPause(bool pause) 不再起作用
- Codeforces Beta Round #77 (Div. 2 Only)
Codeforces Beta Round #77 (Div. 2 Only) http://codeforces.com/contest/96 A #include<bits/stdc++.h ...
- crm作业知识点集合[三]
知识点1 我们要实现一个这样的功能,在学生表中,可以查看每个学生的报名的班级的所有的成绩,就是下图的效果 1.首先我们需要在学生表中自定义一列,这一列的内容就是一个a标签,指向另外一个页面,而我们在另 ...
- swift - self的弱引用
1. weak var weakSelf = self 2. DispatchQueue.main.asyncAfter(deadline: DispatchTime.now()) {[weak se ...
- @Transational)的方法,注解失效的原因和解决方法
在同一个类中,一个方法调用另外一个有注解(比如@Async,@Transational)的方法,注解是不会生效的. 比如,下面代码例子中,有两方法,一个有@Transational注解,一个没有.如果 ...
- DevExpress XPO 开发指南 简要
最近在看devexpress 安装程序中的代码Demos .. C:\Users\Public\Documents\DevExpress Demos 16.1\Components\WinFor ...
- C++中的set
总结一下: vector:封装了数组 list:封装了列表 map,set:封装了二叉树 set:用来存储同一类型的数据类型 非关联容器相对关联型容器插入效率高,原因是:不需要内存拷贝和内存移动, ...