zoukankan      html  css  js  c++  java
  • PhoneGap Geolocation结合百度地图api获取地理位置api

    一、使用百度地图API

      1、地址:http://developer.baidu.com/map/

      2、在js DEMO中获取反地址解析的DEMO

        

      3、修改这个DEMO的密钥,去创建应用就能创建密钥,然后复制密钥到这个页面即可

      4、使用PhoneGap Geolocation 获取地理位置获取到的经度和纬度赋值给point即可

    <!DOCTYPE html> 
    <html>
    <head>
    <meta charset="utf-8">
    <title>phonegap_device_network_notification01</title>
    <link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
    <script src="../jquery.js" type="text/javascript"></script>
    <script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
    <script src="../cordova.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=17923c0196cbabf7603ea9edabdf787d"></script>
    <script type="text/javascript" charset="utf-8">
    
        // 等待PhoneGap加载
        document.addEventListener("deviceready", onDeviceReady, false);
    
        // 加载完成
        function onDeviceReady() {
              navigator.geolocation.getCurrentPosition(onSuccess, onError,{ timeout: 100000, enableHighAccuracy: true });        
        }
    
          function onSuccess(position) {   
            var element = document.getElementById('geolocation');
            var latitude=position.coords.latitude ; //纬度
            var longitude=position.coords.longitude;//径度
            
            
            getPosition(longitude,latitude);
                             
        }
    
        // onError 回调函数, 接收包含具体错误信息的PositionError 对象
        function onError(error) {
            alert('错误代码: '    + error.code    + '
    ' +
                  '详细信息: ' + error.message + '
    ');
        }
    
      
        //根据纬度经度获取详细地址
        function getPosition(longitude,latitude){
        
            // 百度地图API功能
            var map = new BMap.Map("map");
            var point = new BMap.Point(longitude,latitude);
            map.centerAndZoom(point,12);
            var gc = new BMap.Geocoder();    
            
            gc.getLocation(point, function(rs){
                    var addComp = rs.addressComponents;
                    alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
                });      
                
        }
        
    
        </script>
    
    </head> 
    <style type="text/css">
    #map{
        width:100%;
        height:200px;
    }
    </style>
    <body>
    <div data-role="page">
            <div data-role="header">
                <h1>PhoneGap100实战</h1>
            </div>
            <div data-role="content" id="map">
                
            </div>        
            <div data-role="footer">
                <h4>&nbsp;</h4>
            </div>
    </div>
    </body>
    </html>
  • 相关阅读:
    [中文] 以太坊(Ethereum )白皮书
    走近比特币:一个故事看懂“区块链”
    MAC下redis的安装和配置
    mysql查询优化
    mac上用VMWare虚拟机装Linux-Ubuntu
    rest-framework框架
    浅谈设计模式
    [BZOJ3786]星系探索(欧拉序+非旋treap)
    [SDOI2017]遗忘的集合(多项式ln+生成函数+莫比乌斯反演)
    [LuoguP4841]城市规划(多项式ln+生成函数)
  • 原文地址:https://www.cnblogs.com/LO-ME/p/4576233.html
Copyright © 2011-2022 走看看