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

一、H5的地理定位

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

1. 用法:

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

其中:

  1. successCallback()—————–获取用户位置成功的回调函数
  2. errorCallback()———————获取用户位置失败的回调函数
  3. coords——————————–获取当前用户的经纬度
  4. position.coords.longitude——–经度
  5. 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,并且登录
    H5中的地理定位及百度地图api的应用_第1张图片
  • 第三步,登录后,点击立即使用,并创建应用,来获取密钥
    H5中的地理定位及百度地图api的应用_第2张图片
    H5中的地理定位及百度地图api的应用_第3张图片
    H5中的地理定位及百度地图api的应用_第4张图片
  • 第四步,创建好应用后,将密钥(AK)复制下来,留以备用。
    H5中的地理定位及百度地图api的应用_第5张图片
  • 再选择需要使用的展示图,进入DEMO演示
    H5中的地理定位及百度地图api的应用_第6张图片
  • 第五步,将左栏代码拷贝,放入html文件中
    H5中的地理定位及百度地图api的应用_第7张图片
  • 最后,将密钥复制到对应地方即可。
    这里写图片描述
  • 还可以通过获取当前用户位置的经纬度,来得到对应的地图。
    这里写图片描述
    代码如下:

<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>

结果如下:
H5中的地理定位及百度地图api的应用_第8张图片
总结:
利用百度地图的api,结合H5的navigator.geolocation获取用户地理位置,通过密钥可以获得当前地理位置的地图展示。

你可能感兴趣的:(HTML)