码迷,mamicode.com
首页 > 移动开发 > 详细

一个完整的可以输出移动端当前省市(地理坐标)的html页面

时间:2020-06-30 14:52:40      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:map   ini   char   static   initial   jsonp   reverse   back   add   

<!doctype html> 
<html lang="en"> 
 <head> 
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>移动端获取用户地理位置</title> 
 <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> 
 <script type="text/javascript" src="./js/getPosition.js"></script> 
 </head> 
 <body> 
     <p>页面加载弹窗获取用户地理位置</p>
 </body> 
</html> 
<script>
    //获取当前位置的经纬度 
    function getCoordinate(){
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                function (position) {  
                    let latitude = position.coords.latitude
                    let longitude = position.coords.longitude
                    getProAndCity(latitude,longitude)
                },
                function (e) {
                    throw(e.message);
                }
            ) 
        }
    }
    // 通过当前经纬度和百度map查找对应省市
    function getProAndCity(latitude,longitude){
        $.ajax({  
            url: ‘http://api.map.baidu.com/geocoder/v2/?ak=wWYw0yCb8ntXmSgTxTx40vKR&callback=renderReverse&location=‘ + latitude + ‘,‘ + longitude + ‘&output=json&pois=1‘,  
            type: "get",  
            dataType: "jsonp",  
            jsonp: "callback",  
            success: function (data) {
                alert(data.result.addressComponent.province);
                alert(data.result.addressComponent.city);
                alert(data.result.addressComponent.district);
                if (typeof callback == "function") {  
                    callback(data);  
                }  
            } ,
            error:function(){
                alert(‘err‘)
            }
        });
    }
    getCoordinate()
</script>
<style>
html,body{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
p{
    font-size: 14px;
}   
</style>
有些机型没效果,在改

一个完整的可以输出移动端当前省市(地理坐标)的html页面

标签:map   ini   char   static   initial   jsonp   reverse   back   add   

原文地址:https://www.cnblogs.com/wd163/p/13213371.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!