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>
  • 相关阅读:
    021.day21 反射 Class类 反射常用操作
    020.day20 线程概述 多线程优缺点 线程的创建 线程常用方法 生命周期 多线程同步
    019.day19 缓冲流 对象流 标准输入输出流
    018.day18 map集合如何实现排序 File类 IO流 字节流 字符流 编码
    017.day17 Map接口 克隆 treeSet集合排重缺陷
    016.day16 HashSet TreeSet 比较器Comparable Comparator
    015.day15
    014.day14
    013.day13
    线程
  • 原文地址:https://www.cnblogs.com/LO-ME/p/4576233.html
Copyright © 2011-2022 走看看