1. 先取得经纬度 

html5 地理定位
  https://www.w3school.com.cn/html5/html_5_geolocation.asp

2. 通过经纬度获取地理位置  
  获取百度地图 ak
  http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey

点击获取ak:

浏览器端 调用百度api定位_地图

 

浏览器端 调用百度api定位_地理位置_02

 

百度demo:

http://lbsyun.baidu.com/jsdemo.htm#i8_1

 

* index.html

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>simple location</title>
    <style>
        #allmap {width: 400px; height: 400px;}
    </style>
    <!-- ak换成自己的百度ak -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=umuxHFkZaW9MfQeMG6btIEXA4cCy8ITz"></script>
</head>
<body>
<p id="demo">获得你的坐标:</p>
<div id="allmap"></div>
<!--<button onclick="getLocation()">取得坐标</button>-->
<!-- @ref:
http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey
http://lbsyun.baidu.com/apiconsole/key
 -->
<script>
    (function() {
        if (!navigator.geolocation) {
            alert("Geolocation is not supported by this browser.");
            return false;
        }
        var demo = document.getElementById("demo");
        var posHandler = function(position) {
            demo.innerHTML= "Longitude(经度): " + position.coords.longitude + "<br />" +
                "Latitude(纬度): " + position.coords.latitude;

            // 创建地图实例
            var map = new BMap.Map("allmap");
// 创建点坐标
            // 初始化地图，设置中心点坐标和地图级
            var point = new BMap.Point(position.coords.longitude, position.coords.latitude);
            map.centerAndZoom(point, 15);
//设置定位按钮位置
            var opts = {anchor:BMAP_ANCHOR_BOTTOM_RIGHT};
//设置缩放按钮位置及类型
            var ove={anchor:BMAP_ANCHOR_TOP_RIGHT,type:BMAP_NAVIGATION_CONTROL_ZOOM};
//将定位控件添加到地图上
            map.addControl(new BMap.GeolocationControl(opts));
//添加缩放按钮
            map.addControl(new BMap.NavigationControl(ove));
            //启用滚轮放大缩小
            map.enableScrollWheelZoom();
        };
        navigator.geolocation.getCurrentPosition(posHandler);

        return true;
    })();

</script>
</body>
</html>

浏览器端 调用百度api定位_定位_03

浏览器会弹窗询问是否允许定位, 选择允许

浏览器端 调用百度api定位_地理位置_04