geolocation两个小案例

最新推荐文章于 2023-07-22 00:40:01 发布

chenx1n

最新推荐文章于 2023-07-22 00:40:01 发布

阅读量1k

点赞数

分类专栏： notes 文章标签： geolocation

本文链接：https://blog.csdn.net/weixin_43087487/article/details/83999613

版权

notes 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

使用地理位置定位

地理位置API通过 navigator.geolcation提供
废话不说直接上例子:

	// geolcation是获取本地地理定位信息的api
	// api 获取当前设备的地理信息对象
	navigator.geolocation.getCurrentPosition(function(position) {
		// 成功获取的回调函数
		// position 地理信息
		console.log(position)
	},function(err) {
		// 失败时候的回调
		//Network location provider at 'https://www.googleapis.com/' : No response received
		//调用的是境外的谷歌定位服务
        //注意：但是在移动设备是可以使用的
        console.log(err);
	})

基于百度地图的地理定位信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Geolocation</title>
    <style type="text/css">
        html,body {
            height: 100%
        }
        body {
            margin: 0;
            padding: 0;
        }
        #container {
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
<div id="container"></div>
<!-- 引入百度javascript版 API -->
<script src="http://api.map.baidu.com/api?v=2.0&ak=	0A5bc3c4fb543c8f9bc54b77bc155724"></script>
<script>

    var geolocation = new BMap.Geolocation
    geolocation.getCurrentPosition(function(position){
        console.log(position)
        // 这些都是写死
        var map = new BMap.Map("container") // container表示显示哪个容器
        // 把经度纬度传给百度
        /*40.1691162668,116.6348530780*/
        var point = new BMap.Point(position.point.lng,position.point.lat)
        //默认的比例
        map.centerAndZoom(point, 20)
        //添加鼠标滚动缩放
        map.enableScrollWheelZoom()
        // 只写上面三行就可出现地图了，并且会定位
        // 定义好了一个图片标记
        var myIcon = new BMap.Icon("1.png", new BMap.Size(128, 128));
        // 创建标注
        var marker = new BMap.Marker(point, {icon: myIcon})
        map.addOverlay(marker)
    });
</script>
</body>
</html>

基于百度地图的地理定位信息

chenx1n

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
geolocation两个小案例

使用地理位置定位地理位置API通过 navigator.geolcation提供废话不说直接上例子: // geolcation是获取本地地理定位信息的api // api 获取当前设备的地理信息对象 navigator.geolocation.getCurrentPosition(function(position) { // 成功获取的回调函数 // position 地理...
复制链接

扫一扫