mui --- 怎么获取百度地图定位功能

<!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" />
        <style>
            #container {
                width: 100%;
                height: 500px;
                background: #0062CC;
            }
        </style>
    </head>

    <body>
        <div class="mui-content">
            <div id="container">
                1122
            </div>
        </div>

        <script src="js/mui.min.js"></script>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key值"></script>
        <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
        <script type="text/javascript">
            mui.init();

            mui.plusReady(function() {

                var longitude, latitude;
                //var map = new BMap.Map("container");

//                navigator.geolocation.getCurrentPosition(function(position) {
//                    longitude = position.coords.longitude;
//                    latitude = position.coords.latitude;
//
//                    console.log("longitude:" + longitude + "==latitude:" + latitude);
//                    var point = new BMap.Point(longitude, latitude);
//                    map.centerAndZoom(point, 20); // 初始化地图,设置中心点坐标和地图级别
//                    var marker = new BMap.Marker(point); // 创建标注
//                    map.addOverlay(marker); // 将标注添加到地图中
//                    map.panTo(point);
//                });

                plus.geolocation.getCurrentPosition(translatePoint, function(e) {
                    mui.toast("异常:" + e.message);
                });

                function translatePoint(position) {
                    var currentLon = position.coords.longitude;
                    var currentLat = position.coords.latitude;
                    var gpsPoint = new BMap.Point(currentLon, currentLat);
                    BMap.Convertor.translate(gpsPoint, 2, initMap); //坐标转换
                }

                function initMap(point) {
                    map = new BMap.Map("container"); //创建地图
                    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));

                }

                //                setTimeout(function() {
                //                    var gpsPoint = new BMap.Point(longitude, latitude);
                //                    BMap.Convertor.translate(gpsPoint, 0, function(point) {
                //                        var geoc = new BMap.Geocoder();
                //                        geoc.getLocation(point, function(rs) {
                //                            var addComp = rs.addressComponents;
                //                            mui.alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
                //                        });
                //                    });
                //                }, 3000);

            });
        </script>
    </body>

</html>

把你的key放在上面的就OL。不想说太多直接上代码实用。

时间: 2024-11-05 09:36:50

mui --- 怎么获取百度地图定位功能的相关文章

初学HBuilder之MUI框架---实现百度地图定位功能

最近接触了一款移动端APP框架,CSS库是MUI,JS库是5+Runtime. 个人感觉这两个库使用起来特别方便. 话不多说,直接上代码: 这是引用百度地图的JS <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=HR3RRyTsXYdQ3QzzG5yUkg0q"></script> <script type="text/

MUI框架---实现百度地图定位功能

1 2 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=HR3RRyTsXYdQ3QzzG5yUkg0q"></script>     <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/conv

【MUI】百度地图定位功能

博主最近进行一款APP开发,需要用到定位功能,经过一番折腾,终于搞定,不废话,代码如下 mui.plusReady(function() { var longitude, latitude; //var map = new BMap.Map("container"); // navigator.geolocation.getCurrentPosition(function(position) { // longitude = position.coords.longitude; //

android 百度地图 定位功能

废话不多说 直接新建一个新android项目:location,然后花一分钟申请一个key,然后就是把百度定位demo抄一下就行 1:首先在AndroidManifest.xml中添加权限 <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" > </uses-permission> <uses-permission android:name="andr

iOS第三方地图-百度地图常用功能使用(POI搜索,地理正反编码,定位,添加标注)

百度地图官网: http://developer.baidu.com/map/index.php?title=iossdk 百度地图集成 1.引入相关包 注:不需要使用地图功能的可以不用boundle包,模拟器使用的framework和真机不一样具体看官网 2.info.plist中 3.在TARGETS->Build Settings->Other Linker Flags 中添加-ObjC. 4.将一个文件设置为.mm 百度地图使用 1.AppDelegate中注册 _mapManager

IOS中使用百度地图定位后获取城市坐标,城市名称,城市编号信息

IOS中使用百度地图定位后获取城市坐标,城市名称,城市编号信息 /**当获取到定位的坐标后,回调函数*/ - (void)didUpdateBMKUserLocation:(BMKUserLocation *)userLocation{ BMKCoordinateRegion region; region.center.latitude  = userLocation.location.coordinate.latitude; region.center.longitude = userLoca

Android百度地图定位

说到百度地图,现在这个时候应该都是众说周知了吧,多的话不扯了,直接奔向主题. 接入百度地图api必须申请key,这里申请key就不用说了,官方文档上面有介绍如何去申请key. 这里使用的百度地图定位是4.2的版本,api是3.1.1版本.如果申请好了key,那么就可以进入编码阶段了,具体实现如下: 1.引入百度地图相关jar包及armeabi目录到libs目录中 2.在项目的AndroidManifest.xml文件中配置相关信息 配置权限 <uses-permission android:na

微信企业号开发:微信考勤百度地图定位

之前在微信企业号开发:微信考勤中使用了百度地图的定位组件,但发现在部分手机上会出现定位失败的提示,于是有研究了一下百度地图.原来使用的Web组件百度不打算更新了,也是重新查了一下百度地图的其他API,还有一个JavaScript API大众版,于是试了试,没想到竟然解决了. 核心代码很简单: <div id="allmap"></div> <script type="text/javascript" src="http://a

微信企业号开发:微信考勤百度地图定位,错误修正

在使用百度地图进行微信考勤时,遇到很多问题,尤其是定位问题,我知道定位有偏差,但使用百度地图,几十次后,偶尔一次会错的离谱,例如直接就定位到了外省,例如我一直在西安,一次定位到了天津,一次定位到了石家庄,我不知道为什么会这样.偏差几千米还能理解,可偏差几百公里就是在让人不能理解了.是因为我用的百度API是免费的吗?当然出现的次数不多,一般情况下,四五十次,会偶尔出现一两次这么离谱的偏差. 实在找不到原因,也不能是缓存,因为我没有去过石家庄,天津.没办法,但这个问题,又不能不解决,于是只能把四种计