百度地图——获取当前所在城市名、当前定位的地址和经纬度

1.获取城市名、市中心地址和经纬度

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>IP获取城市</title>
        <style type="text/css">
            html {
                height: 100%
            }

            body {
                height: 100%;
                margin: 0px;
                padding: 0px
            }

            #container {
                height: 1000px;
                width: 1000px;
            }
        </style>
        <script type="text/javascript" src="/Js/JqueryEasyUI/jquery-1.8.0.min.js"></script>
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=自己的密钥"></script>
        </script>
    </head>
    <body>
        <div id="container"></div>
        <script type="text/javascript">
            var geoc = new BMap.Geocoder(); //获取用户的地址解析。
            var native = new BMap.LocalCity(); //此类用于获取用户所在的城市位置信息
            var lat, lng, cityname;
            native.get(function(r) {
                lng = r.center.lng; //经度
                lat = r.center.lat; //纬度
                cityname = r.name; //城市名
                geoc.getLocation(r.center,
                    function(rs) {

                        alert('城市：' + cityname + '，经度:' + lng + ',纬度:' + lat);
                        var map = new BMap.Map("container");
                        // 创建地图实例  
                        var point = new BMap.Point(lng, lat); ////创建坐标点
                        // 创建点坐标  
                        map.centerAndZoom(point, 10);
                        // 初始化地图，设置中心点坐标和地图级别
                    });
            });
        </script>
    </body>
</html>

 

2.获取定位地址和经纬度

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>IP获取城市</title>
        <style type="text/css">
            html {
                height: 100%
            }

            body {
                height: 100%;
                margin: 0px;
                padding: 0px
            }

            #container {
                height: 100%;
                width: 100%;
            }
        </style>
        <script type="text/javascript" src="/Js/JqueryEasyUI/jquery-1.8.0.min.js"></script>
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=3xCeR6byd0p7h73NSr38Sni1flZCatdw"></script>
        </script>
    </head>
    <body>
        <div id="container"></div>
        <script type="text/javascript">
            var geo = new BMap.Geolocation();
            var myLat,myLng,myAddress;
            geo.getCurrentPosition(function(gr){
                myLat=gr.point.lat;//定位的纬度
                myLng=gr.point.lng;//定位的经度
                myAddress=gr.address.province+gr.address.city+gr.address.district+gr.address.street+(gr.address.streetNumber?gr.address.streetNumber:"");
                console.log("定位经纬度:("+myLat+","+myLng+")");
                console.log("定位范围:"+gr.accuracy+"米");
                console.log("当前所在地址:"+myAddress);
                var map = new BMap.Map("container");
                // 创建地图实例  
                var point = new BMap.Point(myLng, myLat); ////创建坐标点
                // 创建点坐标  
                map.centerAndZoom(point, 15);
                // 初始化地图，设置中心点坐标和地图级别
            })
            
        </script>
    </body>
</html>

 

posted @ 2021-06-05 16:28  Dorimcir  阅读(2254)  评论(0)    收藏  举报