zoukankan      html  css  js  c++  java
  • 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 {
                     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。不想说太多直接上代码实用。

  • 相关阅读:
    「十二省联考2019」 春节十二响
    「八省联考2018」 劈配
    斯特林数
    「POJ2505」A multiplication game [博弈论]
    [luogu2048] [bzoj2006] [NOI2010] 超级钢琴 题解
    [HNOI2002]-洛谷2234-营业额统计-Treap
    平衡树Treap模板与原理
    KMP算法讲解
    高斯消元--模板,原理
    第一篇博客!!
  • 原文地址:https://www.cnblogs.com/youmingkuang/p/6650537.html
Copyright © 2011-2022 走看看