mui：在javascript中使用百度地图实现精确定位（一） - 风雨落 - CSDN博客
mui：在javascript中使用百度地图实现精确定位（一）
这一篇文章的方法只能定位到城市一级，需要更精确，可以看这篇文章
在国内一般都使用百度地图、高德地图等来实现定位，
首先你要申请密钥， 可以参考网上的教程
其次就是使用了，引入
&script type="text/javascript" src="http://api./api?v=2.0&ak=你申请的ak码"&
这样你就可以调用百度地图的API了，然后在这里要说的是定位，获取经纬度
if(navigator.geolocation) {
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(showLocation, {
enableHighAccuracy: true
map.addControl(new BMap.GeolocationControl());
将经纬度解析为地址
var gc = new BMap.Geocoder();
gc.getLocation(centerPoint,function(rs){
var addComp = rs.addressC
var mapAddress = addComp.province + addComp.city + addComp.district
+ addComp.street + addComp.streetN
var address = document.getElementById('address');
address.value=mapA
address.readOnly='readonly';
下面是完整的样例
&!DOCTYPE html&
http-equiv="Content-Type" content="text/ charset=utf-8" /&
name="viewport" content="initial-scale=1.0, user-scalable=no" /&
name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
href="../../css/mui.min.css" rel="stylesheet" /&
src="../../js/mui.min.js"&&
type="text/css"&
width: 100%;
height: 80%;
overflow: hidden;
font-family: "微软雅黑";
type="text/javascript" src="http://api./api?v=2.0&ak=你申请的ak码"&&
&地图展示&
class="mui-bar mui-bar-nav"&
class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"&&
class="mui-title"&签到打卡&
id="allmap"&&
type="text" id="address" /&
type="text/javascript"&
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398, 39.897445);
map.centerAndZoom(point, 16);
if(navigator.geolocation) {
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(showLocation, {
enableHighAccuracy: true
map.addControl(new BMap.GeolocationControl());
var gc = new BMap.Geocoder();
function showLocation(r) {
if(this.getStatus() == BMAP_STATUS_SUCCESS) {
var centerPoint = new BMap.Point(r.longitude, r.latitude);
map.panTo(centerPoint);
map.setCenter(centerPoint);
gc.getLocation(centerPoint,function(rs){
var addComp = rs.addressC
var mapAddress = addComp.province + addComp.city + addComp.district
+ addComp.street + addComp.streetN
var address = document.getElementById('address');
address.value=mapA
address.readOnly='readonly';
var mk = new BMap.Marker(centerPoint);
mk.disableDragging();
map.addOverlay(mk);
mui.alert('failed' + this.getStatus());
我的热门文章提供主流cms教程
提供数据库教程和设计
提供各种常见网页js代码
提供常用的JS特效代码及在线演示
提供jQuery插件教程及插件下载
提供服务器常见问题及教程
提供站长技术、站长资讯等内容
提供常用开发手册和开发工具
您现在的位置：& >
mui框架使用的过程中遇到的几个问题
导读：1.zepto.js和mui一起使用的时候，tap事件会发生两次，这时只要不引用zepto.js的touch.js就可以了，只用mui的tap事件
1.zepto.js和mui一起使用的时候，tap事件会发生两次，这时只要不引用zepto.js的touch.js就可以了，只用mui的tap事件，如：
mui(&.infor_header&).on('tap','li',function(){
&&&& alert(123);
$(&.box&)[0].addEventListener(&tap&,function(){
&&&& alert(456);
2.mui使用的时候会将所有的a标签的href屏蔽，所以需要引入一段js，如下：
mui.init();
window.onload=function(){
&&&& var els=$(&a&);
&&&& for(var i=0;i&els.i++){
&&&&&&&&&&& els[i].addEventListener('tap',function(){
&&&&&&&&&&&&&&&&& openCustURL(this.getAttribute('href'));
&&&&&&&&&&& })
function openCustURL(vurl){
&&&&& mui.openWindow({
&&&&&&&&&&& url:vurl,
&&&&&&&&&&& show:{
&&&&&&&&&&&&&&&&&& autoShow:true,
&&&&&&&&&&&&&&&&&& aniShow:'slide-in-right',
&&&&&&&&&&&&&&&&&& duration:400
&&&&&&&&&&& },
&&&&&&&&&&& waiting:{
&&&&&&&&&&&&&&&&&& autoShow:false,
&&&&&&&&&&&&&&&&&& title:'正在加载...'
&&&&&&&&&&& }
转载请注明（B5教程网）原文链接：
网友评论：Be right back.
Resource Not Found输入关键字或相关内容进行搜索
通过本人多次尝试，问题已经解决。
我原来打开扫码窗口是直接用mui.openwindow来打开的，后来换成调用demo中common.js里的clicked()函数来打开扫码窗口，问题得以解决。
至于为什么直接用mui.openwindows不行，我就没研究了。遇到问题。
这个很容易重现，地图页面是采用的那个示例，地图页面为了页面加载提高效率，是hide的，不是退出的，这种情况下，再打开扫码页面就会出现这个问题。我的qq：
请管理员加我qq，我给你代码看看怎么回事。
这个是测试工程附件，就是在demo上改了改而已。
要回复问题请先或
关注: 2 人　　　　最近接触了一款移动端APP框架，CSS库是MUI，JS库是5+Runtime。 个人感觉这两个库使用起来特别方便。
　　　　话不多说，直接上代码：
　　　　这是引用百度地图的JS
&script type="text/javascript" src="http://api./api?v=2.0&ak=HR3RRyTsXYdQ3QzzG5yUkg0q"&&/script&
&script type="text/javascript" src="/map/jsdemo/demo/convertor.js"&&/script&
　　　　这个是MUI封装好的JS，可用来调用移动设备底层功能：
&script src="../js/mui.min.js"&&/script&
　　　　HTML代码：
&div id="allmap"&
地图加载中...
　　　　JS调用底层：
mui.plusReady(function(){
plus.geolocation.getCurrentPosition(translatePoint,function(e){
mui.toast("异常:" + e.message);
　　　　最核心的部分，创建地图并且转换坐标：
function translatePoint(position){
var currentLon = position.coords.
var currentLat = position.coords.
var gpsPoint = new BMap.Point(currentLon,currentLat);
BMap.Convertor.translate(gpsPoint,2,initMap); //坐标转换
function initMap(point){
map = new BMap.Map("allmap"); //创建地图
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.centerAndZoom(point,15);
map.addOverlay(new BMap.Marker(point));
　　这样，一个移动端的百度地图GPS定位已经完成了，当然还有很多其他功能，但是我暂时还没有使用上，待以后使用的时候，再来追加~~
阅读(...) 评论()}