获取GPS坐标

<script type="text/javascript">
	function getLocation(){
        var options={
            enableHighAccuracy:true, 
            maximumAge:1000
        }
        if(navigator.geolocation){
            console.log('支持')
            //浏览器支持geolocation
            navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
        }else{
            //浏览器不支持geolocation
            console.log('不支持')
        }
    }
    //成功时
    function onSuccess(position) {

        //经度
        longitude = position.coords.longitude;

        //纬度
        latitude = position.coords.latitude;
    }

    //失败时
    function onError(error) {
        switch (error.code) {
            case 1:
                alert("位置服务被拒绝");
                break;

            case 2:
                alert("暂时获取不到位置信息");
                break;

            case 3:
                alert("获取信息超时");
                break;

            case 4:
                alert("未知错误");
                break;
        }
</script>

接下来可以把坐标放入地图中显示出来

我这里用的百度地图
注意:相同的GPS坐标在不同的地图上显示的位置是不同的,可以去下面的链接看一下
http://www.gpsspg.com/maps.htm
第三方地图的API中通常都会提供坐标转换代码,我们可以将获取到的原始代码放入转换函数中转换,我在下面的例子中调用了百度地图的坐标转换

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
    <title>GPS定位</title>
</head>
<body onload="theLocation()">
<div id="allmap"></div>
</body>

<script type="text/javascript">
    var longitude;
    var latitude;

    // 用经纬度设置地图中心点
    function theLocation() {
        var options = {
            enableHighAccuracy: true,
            maximumAge: 1000
        }
        if (navigator.geolocation) {
            console.log('支持')
            //浏览器支持geolocation
            navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
        } else {
            //浏览器不支持geolocation
            console.log('不支持')
        }
    }

    //成功时
    function onSuccess(position) {

        //返回用户位置
        //经度
        longitude = position.coords.longitude;

        //纬度
        latitude = position.coords.latitude;
        // 百度地图API功能
        var ggPoint = new BMap.Point(longitude, latitude);
        var bm = new BMap.Map("allmap");
        bm.centerAndZoom(ggPoint, 17);	//地图放大倍数
        //坐标转换完之后的回调函数
        translateCallback = function (data) {
            if (data.status === 0) {
                console.log('成功')
                var marker = new BMap.Marker(data.points[0]);
                bm.addOverlay(marker);
                bm.setCenter(data.points[0]);
            }
        }
        setTimeout(function () {
            var convertor = new BMap.Convertor();
            var pointArr = [];
            pointArr.push(ggPoint);
            convertor.translate(pointArr, 1, 5, translateCallback)
        }, 0);
    }

    //失败时
    function onError(error) {
        switch (error.code) {
            case 1:
                alert("位置服务被拒绝");
                break;

            case 2:
                alert("暂时获取不到位置信息");
                break;

            case 3:
                alert("获取信息超时");
                break;

            case 4:
                alert("未知错误");
                break;
        }
    }
</script>

</html>
Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐