H5中的地理定位及百度地图api的应用

最新推荐文章于 2024-04-03 17:58:25 发布

wss5

最新推荐文章于 2024-04-03 17:58:25 发布

阅读量9.7k

点赞数 2

分类专栏： HTML 文章标签： H5地理位置

本文链接：https://blog.csdn.net/weixin_41342585/article/details/79547178

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、H5的地理定位

navigator.geolocation

HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制，必须先得到用户明确许可，才能获取用户的位置信息。

1. 用法：

//兼容写法
if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success,error);
    } else {
    alert("对不起，您的浏览器不支持地理定位！");
}

其中：

successCallback()—————–获取用户位置成功的回调函数
errorCallback()———————获取用户位置失败的回调函数
coords——————————–获取当前用户的经纬度
position.coords.longitude——–经度
position.coords.latitude———-纬度

1 . successCallback() 获取地理位置成功的回调函数

function successCallback (position) {
    var longitudeValue = position.coords.longitude;//获得当前位置的经度
    var latitudeValue = position.coords.latitude;//获得当前位置的纬度
    console.log("经度："+longitudeValue+"---纬度："+latitudeValue);
}

2 . errorCallback() 获取地理位置失败的回调函数

function errorCallback (error) {
    console.log(error);
    console.log("获取用户位置失败！")
}

最后：
可以获得用户位置的经纬度。还可以通过http://www.gpsspg.com/maps.htm网址，利用经纬度来查询到地图。

二、百度地图API的应用

第一步，进入百度地图开发平台。http://lbsyun.baidu.com/
第二步，找到对应的“ 开发文档 ”下的JavaScript API，并且登录
第三步，登录后，点击立即使用，并创建应用，来获取密钥
第四步，创建好应用后，将密钥（AK）复制下来，留以备用。
再选择需要使用的展示图，进入DEMO演示
第五步，将左栏代码拷贝，放入html文件中
最后，将密钥复制到对应地方即可。
还可以通过获取当前用户位置的经纬度，来得到对应的地图。

代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>普通地图&全景图</title>
    <!--填写有效的密钥-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=我的密钥"></script>
    <style type="text/css">
        body, html{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        #panorama {height: 50%;overflow: hidden;}
        #normal_map {height:50%;overflow: hidden;}
    </style>
</head>
<body>
<div id="panorama"></div>
<div id="normal_map"></div>
<script type="text/javascript">
    //设置展示图的经纬度，以便代入查询地图
    var longitudeValue =  115.832422;//经度
    var latitudeValue = 28.760448 ;//纬度
    //全景图展示
    var panorama = new BMap.Panorama('panorama');
    panorama.setPosition(new BMap.Point(longitudeValue, latitudeValue)); //根据经纬度坐标展示全景图
    panorama.setPov({heading: -40, pitch: 6});
    panorama.addEventListener('position_changed', function(e){ //全景图位置改变后，普通地图中心点也随之改变
        var pos = panorama.getPosition();
        map.setCenter(new BMap.Point(pos.lng, pos.lat));
        marker.setPosition(pos);
    });
    //普通地图展示
    var mapOption = {
        mapType: BMAP_NORMAL_MAP,
        maxZoom: 18,
        drawMargin:0,
        enableFulltimeSpotClick: true,
        enableHighResolution:true
    }
    var map = new BMap.Map("normal_map", mapOption);
    var testpoint = new BMap.Point(longitudeValue, latitudeValue);
    map.centerAndZoom(testpoint, 18);
    var marker=new BMap.Marker(testpoint);
    marker.enableDragging();
    map.addOverlay(marker);
    marker.addEventListener('dragend',function(e){
        panorama.setPosition(e.point); //拖动marker后，全景图位置也随着改变
        panorama.setPov({heading: -40, pitch: 6});}
    );
</script>
</body>
</html>

结果如下：
这里写图片描述
总结：
利用百度地图的api，结合H5的navigator.geolocation获取用户地理位置，通过密钥可以获得当前地理位置的地图展示。

wss5

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
H5中的地理定位及百度地图api的应用

一、H5的地理定位navigator.geolocation HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制，必须先得到用户明确许可，才能获取用户的位置信息。1. 用法：//兼容写法if(navigator.geolocation) { navigator.geolocation.getCurrentPosition...
复制链接

扫一扫