Google地图获取位置的前端代码与测试

北里闻箫

于 2024-07-02 21:39:52 发布

阅读量138

点赞数 2

分类专栏：前端文章标签：前端 javascript googlemap

本文链接：https://blog.csdn.net/beiliwenxiao/article/details/140136782

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

test.html


<script src="http://maps.google.com/maps/api/js?sensor=false"></script>  
<script >
if (navigator.geolocation) {　　
	console.log('Geolocation is supported!');
	// var startPos;
	var geoSuccess = function(position) {
		startPos = position;
		// console.log('startPos.'+ startPos.coords.latitude + " " + startPos.coords.longitude);
	};
	navigator.geolocation.getCurrentPosition(geoSuccess);
} else {　　
	alert("浏览器不支持地理定位。");　　
}　

</script>

testClose.html

<script src="//maps.google.com/maps/api/js?sensor=false"></script>
<script >

    _callback = false;
    function successCallback(position) {
        _callback = true;
        // startPos = position;
        // console.log('startPos.'+ startPos.coords.latitude + " " + startPos.coords.longitude);
        console.log('success' + position);
    }

    // 如果取消位置確認，相當於離開。
    function errorCallback(error) {
        callback = true;
        console.log('error' + error);
        webClose();
    }
    setTimeout(function(){if(!_callback)console.log('ignored')}, 20000);



    if (navigator.geolocation) {　　
	    console.log('Geolocation is supported!');
        navigator.geolocation.getCurrentPosition(
                successCallback,
                errorCallback,
                {timeout: 2000}
        );

    } else {　　
	    alert("浏览器不支持地理定位。");

        // 如果取消位置確認，相當於離開。
        webClose();

    }　

    function webClose() {
        $('.your-tip').show();
        $('.your-wrapper').hide();
        $('#your-dialog').hide();
        $('#your-sth').hide();
    }

</script>

testShow.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浏览器地理位置信息api测试</title>
<style>
html,body,#gmap{height:100%; margin:0;}
body{font-size:83%;}
#help{padding-top:20%; text-align:center;}
</style>
</head>

<body>
<div id="gmap"></div>
<script src="//maps.google.com/maps/api/js?sensor=false"></script>
<script>
var eleGmap = document.getElementById("gmap");
var showMap = function(position) {
	//经纬度
    var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
	//地图参数
	var options = {
		zoom: 10,
		center: pos,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	//地图
	var map = new google.maps.Map(eleGmap, options);
	//地图浮动提示
	var marker = new google.maps.Marker({
		position: pos,
		map: map,
		title: "用户位置"
	});
	//提示内容
	var contentString = "<b>时间戳:</b> " + parseTimestamp(position.timestamp) + "<br/><b>用户位置:</b> 纬度 " + position.coords.latitude + ", 经度 " + position.coords.longitude + ", 精确度 " + position.coords.accuracy;
	var infowindow = new google.maps.InfoWindow({
		content: contentString
	});
	//提示事件绑定
	google.maps.event.addListener(marker, 'click', function() {
		infowindow.open(map,marker);
	});
};

//时间戳获取与处理
var parseTimestamp = function(timestamp) {
	var d = new Date(timestamp);
	var day = d.getDate();
	var month = d.getMonth() + 1;
	var year = d.getFullYear();
	var hour = d.getHours();
	var mins = d.getMinutes();
	var secs = d.getSeconds();
	var msec = d.getMilliseconds();
	return year + "年" + month +"月"+ day +"日 "+ hour + ":" + mins + ":" + secs + ", " + msec;
};

if (navigator.geolocation) {
	eleGmap.innerHTML = '<div id="help"><img src="loading_blue_s.gif" /><p>如果长时间加载不出来，可能因为没有ApiKeys!</p></div>';
    //一次性获取位置的请求
    navigator.geolocation.getCurrentPosition(showMap);
} else {
	eleGmap.innerHTML = '<div id="help">您的浏览器不支持地理位置 O(∩_∩)O~</div>';
}
</script>


</body>
</html>

本代码需要结合google地图的后台配置使用。在实际运用时，需要将js?sensor=false替换为js?key=yourKey

先运行test.html，点允许授权后，才可以访问testShow.html。
testClose.html，是模拟点击禁用后，进行的操作。禁用地图则不允许使用功能。

北里闻箫

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Google地图获取位置的前端代码与测试

本代码需要结合google地图的后台配置使用。在实际运用时，需要将js?sensor=false替换为js?testClose.html，是模拟点击禁用后，进行的操作。禁用地图则不允许使用功能。先运行test.html，点允许授权后，才可以访问testShow.html。
复制链接

扫一扫