一.获取位置信息的几种方式
1.IP地址：一般个人IP都是从移动、电信等ISP动态提供的，这样的定位获取的结果可能都是离你最新的ISP位置；
2.GPS定位：利用GPS卫星定位，结果当然比较准确，但如果是手机之类的耗电比较大；
3.WIFI定位：根据你当前接入的无线所在的位置进行定位；
4.手机定位：通过手机接入的基站计算所在位置，或者使用上述GPS或WIFI定位，这个手机会自动选择最合适的，因此如果你没有使用无线，有的APP可能会提醒接入无线可以提高定位的精确度；
5.用户自定义：在页面中直接给出输入框，让用户直接输入所在位置。

不知道有没有什么最新的定位技术，哈哈，如果有请私信告知蛋黄酥。以上所有的定位结果都是获取经度和纬度等信息，据我所知一般都是十进制表示的，比如百度地图、谷歌地图都是使用十进制表示经纬度。

二.使用HTML5的geolocation对象
在我们调用geolocation获取用户位置信息是，具体使用了上述的哪种方法是根据当前设备决定的，它如果可以使用多种方法，浏览器会自动使用其中最合适的方法。还有一点需要注意，使用geolocation的方法会询问用户是否允许！！！
检查浏览器是否支持：

if (navigator.geolocation){
    // yes 
} else {
    // no
}

只获取一次位置信息的方法：

var gl = navigator.geolocation;
// 前两个参数为回调函数，第三个参数的可选的设置
// success 位置获取成功时调用
// error 位置获取发生错误时调用
// options 位置获取时的设置，可以使用JSON对象设置
gl.getCurrentPosition(success,error,options);
function success(p){
    // p参数包含两个对象
    // p.coords 可以获取定位的所有信息
    // p.timestamp 可以获取定位的时间戳
    alert("当前位置纬度为：" + p.coords.latitude 
        + " 经纬为：" + p.coords.longtitude
        + " 位置偏差为：" + p.coords.accuracy + "米");
    // 当然coords还有其他的一些属性
    // 可以根据经纬度做自己需要实现的功能
}
function error(err){
    // 根据err.code不同，判断发生了何种错误
    switch (err.code){
        case 0:
            alert("发生了未定义错误" + err.message);
            break;
        case 1:
            alert("用户不允许获取位置信息" + err.message);
            break;
        case 2:
            alert("获取位置失败" + err.message);
            break;
        case 3:
            alert("获取位置超时" + err.message);
    }
}
var options = {
    timeout : 5000
}
// 设置超时时间为5000毫秒，如果位置获取超出这个时间，就会触发编号为3的错误；使用时把这段代码放在getCurrentPosition之前或直接写在它的参数中。

上述仅仅获取一次位置信息，可以多次调用获取用户最新的位置的信息，但这样不方便实现实时获取用户的位置信息，可以使用另一个方法 watchPosition(success,error) 方法，该方法在用户位置信息改变时会自动调用，是一个后台实时监控方法，它的两个参数和 getCurrentPosition 一样，使用方式也一样，这里就不再赘述了，但要注意：

// 使用 watchPosition 方法给它一个标识符，这样可以在合适的时候停止获取用户的位置信息
var watchID = gl.watchPosition(success,error);
// ...
// 在合适的时间停止它
gl.clearWatch(watchID);

三.定位信息的用途
1.可以使用 watchPosition 实时获取用户的定位信息，计算它当前行走的距离、速度等；
2.结合地图应用，比如百度地图、谷歌地图都是可以免费使用的，但有一些限制，比如日请求次数等，利用实时定位在地图上获取用户的行走路线；
比如下面是一个使用百度地图的例子：

// 这个脚本必须先引入到你自己的页面中，下面的那个密钥可以去百度地图开放api官网免费注册获得。所以我自己的当然不能放上去了
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
// 下面使用官网的一段代码
<script>
    // 百度地图API功能
    // allmap 是你页面自定位的div等标签的id，用来放地图
    var map = new BMap.Map("allmap");
    // 根据经纬度初始化地图的位置
    var point = new BMap.Point(116.331398,39.897445);
    // 位置居中并设置地图显示的详细程度
    map.centerAndZoom(point,12);

    // 百度地图封装了 geolocation 对象，原理是一样的
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            // 如果获取成功，根据经纬度新建一个标记，默认是一个带尖的红点 
            var mk = new BMap.Marker(r.point);
            // 将新建的标记添加到地图上
            map.addOverlay(mk);
            // 移动地图到定位获得的经纬度上
            map.panTo(r.point);
            alert('您的位置：'+r.point.lng+','+r.point.lat);
        }
        else {
            alert('failed'+this.getStatus());
        }        
    },{enableHighAccuracy: true})
    // enableHighAccuracy 参数设置告诉浏览器使用精确定位

通过当前html获取当前地址，借助高德地图实现https://lbs.amap.com，效果图

开箱即用

两张标记点的图

核心代码

   var marker, map = new AMap.Map('container', {
        resizeEnable: true
    });


    AMap.plugin('AMap.Geolocation', function () {
        var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 20000,          //超过10秒后停止定位，默认：5s
            buttonPosition: 'RB',    //定位按钮的停靠位置
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
            showCircle: true,//是否显示定位精度圈
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition(function (status, result) {
            if (status === 'complete') {
                onComplete(result)
            } else {
                onError(result)
            }
        });
    });

    //解析定位结果
    function onComplete(data) {
        console.log('定位成功')
        var str = [];
        console.log(data)
        console.log('定位结果：' + data.position);
        console.log('定位类别：' + data.location_type);
        if (data.accuracy) {
            console.log('精度：' + data.accuracy + ' 米');
        }//如为IP精确定位结果则没有精度信息
        console.log('是否经过偏移：' + (data.isConverted ? '是' : '否'));

        document.getElementById("current").innerText = data.formattedAddress
        marker_t(data.position)
        // marker.setAnimation('AMAP_ANIMATION_BOUNCE');
    }
    //解析定位错误信息
    function onError(data) {
        console.log('定位失败')
        console.log('失败原因排查信息:' + data.message);
    }

// 高德地图查询周边
    function aMapSearchNearBy(centerPoint, city) {
        AMap.service(["AMap.PlaceSearch"], function () {
            var placeSearch = new AMap.PlaceSearch({
                pageSize: 50,    // 每页10条
                pageIndex: 1,    // 获取第一页
                // city: city       // 指定城市名(如果你获取不到城市名称，这个参数也可以不传，注释掉)
                children: 1,
                type: "汽车服务|汽车销售|汽车维修|摩托车服务|餐饮服务|购物服务|生活服务|体育休闲服务|医疗保健服务|住宿服务|风景名胜|商务住宅|政府机构及社会团体|科教文化服务|交通设施服务|金融保险服务|公司企业|道路附属设施|地名地址信息|公共设施"

            });


            // 第一个参数是关键字，这里传入的空表示不需要根据关键字过滤
            // 第二个参数是经纬度，数组类型
            // 第三个参数是半径，周边的范围
            // 第四个参数为回调函数
            placeSearch.searchNearBy('', centerPoint, 2000, function (status, result) {
                console.log(result.info)
                if (result.info === 'OK') {
                    console.log(result)
                    locationList = result.poiList.pois; // 周边地标建筑列表
                    $("#poiList").empty()
                    if (locationList && locationList.length > 0)
                        $("#current").text(getFormatAddr(locationList[0]))


                    for (let i = 0; i < locationList.length; i++) {
                        var item = "<li onclick='selected_lc(" + i + ")'>"
                        //  item += "<img class='left_t' src='../portal/images/location_top_sm.png' alt=''/>"
                        item += "<p class='addr_name'>" + locationList[i].name + "</p>"
                        item += "<p class='all_addr'>" + locationList[i].pname + locationList[i].cityname + locationList[i].adname + locationList[i].address + "</p>"
                        item += " </li>"
                        // alert(item)
                        $("#poiList").append(item)
                    }
                    //document.getElementById("poiList").innerHTML=str

                    // 生成地址列表html　　　　　　　　　 createLocationHtml(locationList);
                } else {
                    console.log('获取位置信息失败!');
                }
            });
        });
    }

完整代码：https://download.csdn.net/download/qq_41389354/13732676

代码出现任何问题请联系我QQ：1603565290，浏览器接入互联网而且必须允许获取位置信息，

1、登录百度地图API官网

http://lbsyun.baidu.com/

2、开发文档——web开发——JavaScript ApI

在API文档中有详细的开发步骤和相关的Demo

3、立即使用

2、申请秘钥

应用名称随意，只要后面是输入正确就可以

应用类型：浏览器端

白名单：由于是本地项目，不是需要发布的项目，所以我输入了*

点击提交

html代码如下

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<script src="js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
	<title>浏览器定位</title>
</head>
<body>
	<h1 id="allmap"></h1>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(116.331398,39.897445);
	map.centerAndZoom(point,12);
	var geolocation = new BMap.Geolocation();
	geolocation.getCurrentPosition(function(r){
		if(this.getStatus() == BMAP_STATUS_SUCCESS){
			var mk = new BMap.Marker(r.point);
			map.addOverlay(mk);
			map.panTo(r.point);
			alert('您的位置：'+r.point.lng+','+r.point.lat);
			//根据经纬度获取城市的名称
			 // 使用百度地图JS API
	var point = new BMap.Point(r.point.lng,r.point.lat);
	var geoc = new BMap.Geocoder();
	geoc.getLocation(point, function(rs){
		var addComp = rs.addressComponents;
		$("#allmap").html(addComp.city);
		alert('您所在城市：'+addComp.city);
	});
		}
		else {
			alert('failed'+this.getStatus());
		}        
	},{enableHighAccuracy: true})
	//关于状态码
	//BMAP_STATUS_SUCCESS	检索成功。对应数值“0”。
	//BMAP_STATUS_CITY_LIST	城市列表。对应数值“1”。
	//BMAP_STATUS_UNKNOWN_LOCATION	位置结果未知。对应数值“2”。
	//BMAP_STATUS_UNKNOWN_ROUTE	导航结果未知。对应数值“3”。
	//BMAP_STATUS_INVALID_KEY	非法密钥。对应数值“4”。
	//BMAP_STATUS_INVALID_REQUEST	非法请求。对应数值“5”。
	//BMAP_STATUS_PERMISSION_DENIED	没有权限。对应数值“6”。(自 1.1 新增)
	//BMAP_STATUS_SERVICE_UNAVAILABLE	服务不可用。对应数值“7”。(自 1.1 新增)
	//BMAP_STATUS_TIMEOUT	超时。对应数值“8”。(自 1.1 新增)
</script>

原理 根据经纬度来定位