H5地理定位

地理位置

if(navigator.geolocation){
        alert("您的浏览器支持定位！");
      }else{
        alert("请更新你的浏览器！");
      }

getCurrentPostion

if(navigator.geolocation){
        alert("您的浏览器支持定位！");        navigator.geolocation.getCurrentPosition(successCallback,errorCallback);
      }else{
        alert("请更新你的浏览器！");
      }
      function successCallback(result){
        //console.log(222);
        alert(parseInt(result.coords.latitude) +","+ parseInt(result.coords.longitude));
        console.log(result);
      }
      function errorCallback(error){
        //console.log(11);
        alert(error);
      }

if(navigator.geolocation){
        alert("您的浏览器支持定位！");        navigator.geolocation.getCurrentPosition(successCallback,errorCallback);
      }else{
        alert("请更新你的浏览器！");
      }
      function successCallback(position){
        //console.log(222);
        var coords = position.coords;
        var latitude = coords.latitude;
        var longitude = coords.longitude;
        var accuracy = coords.accuracy;
        alert(parseInt(latitude)+","+ parseInt(longitude));
        //console.log(result);
      }
      function errorCallback(error){
        //console.log(11);
        //alert(error);
        switch(error.code){
          case 3:
            alert("超时，请重试！");
            break;
          case 2:
            alert("位置信息不可用！");
            break;
          case 1:
            alert("用户拒绝了该浏览器的位置信息请求！");
            break;
          case 0:
            alert("未知错误！");
            break;
        }
      }
  • 配置对象 添加位置对象作为第三个参数options（是个对象{enableHeightAcuracy:true,timeout:5000,maximumAge:3000}）
  • enableHighAcuracy：true（指示浏览器获取高精度的位置、默认为false，设置为true优先使用GPS定位）
  • timeout：5000 （指定获取地理位置的超时时间、默认不限时、单位为毫秒）
  • maximumAge：3000 （最长有效期、在重复获取地理位置时，此参数指定多久在此获取位置）

watchPosition(用在移动端，在设备位置发生变化后不断执行，用法和setCurrentPositon相同)

  • watchPosition（通常使用在移动端，移动设备位置一旦发生变化，就执行一次，获取位置）
var watcher;
      $('#bt1').click(function(){
        if(navigator.geolocation){
          alert("您的浏览器支持定位！");
          watcher = navigator.geolocation.watchPosition(successCallback,errorCallback);
        }else{
          alert("请更新你的浏览器！");
        }
      })
      $('#bt2').click(function(){
        if(navigator.geolocation){
          //alert("您的浏览器支持定位！");
          navigator.geolocation.clearWatch(watcher);
        }else{
          alert("请更新你的浏览器！");
        }
      })
      function successCallback(position){
        //console.log(222);
        var coords = position.coords;
        var latitude = coords.latitude;
        var longitude = coords.longitude;
        var accuracy = coords.accuracy;
        console.log(coords);
        alert(parseInt(latitude)+","+ parseInt(longitude));
        //console.log(result);
      }
      function errorCallback(error){
        //console.log(11);
        //alert(error);
        switch(error.code){
          case 3:
            alert("超时，请重试！");
            break;
          case 2:
            alert("位置信息不可用！");
            break;
          case 1:
            alert("用户拒绝了该浏览器的位置信息请求！");
            break;
          case 0:
            alert("未知错误！");
            break;
        }
      }

百度地图API

  • 引入API
<script src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥" type="text/javascript">   </script>
  • 使用百度地图API
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      *{
        margin: 0;
        padding: 0;
      }
      html,
      body {
        width: 100%;
        height: 100%;
        background: greenyellow;
      }
    </style>
  </head>
  <body>
    <div id="map" style="width:100%;height:100%;"></div>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
  <script src="http://api.map.baidu.com/api?v=2.0&ak=5aiK2z3bGTyMnInk6vjL0tZrU8GKHhl9" type="text/javascript"></script>
  <script type="text/javascript">
    var map = new BMap.Map("map");
    map.centerAndZoom('成都',15);
  </script>
  </body>
</html>
  • 用geolocation对象定位
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(callback: function, options: PositionOptions);

geolocation.getCurrentPosition(function(result) {
            var latitude = result.latitude;
            console.log(latitude);
});
  • 初始化百度地图(map用来实例化地图对象)
var mp = new BMap.Map(‘map’);  //创建地图对象
var point = new BMap.Point(121.491, 31.233);//创建中心点对象
mp.centerAndZoom(point, 15); //初始化地图，设置中心和缩放比例。
  • 初始化地图和定位结合使用
var map = new BMap.Map("map");
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(successCallback);
    function successCallback(position){
      console.log(position);
      map.centerAndZoom(position.point,20);
    }

map对象常见方法

  • enableDragging()/disableDragging() 启用/禁用地图拖拽
  • enableScrollWheelZoom()/disableScrollWheelZoom() 启用/禁用滚轮放大缩小
  • enableDoubleClickZoom()/disableDoubleClickZoom() 启用/禁用双击放大
  • enableKeyboard()/enableKeyboard () 启用/禁用键盘上下键移动地图
  • getCenter() 返回当前的中心点对象

百度API控件

  • 百度API控件
  • Control：控件的抽象基类，所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。
  • NavigationControl：地图平移缩放控件，PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。
  • OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
  • ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系。
  • MapTypeControl：地图类型控件，默认位于地图右上方。
  • CopyrightControl：版权控件，默认位于地图左下方。
  • GeolocationControl：定位控件，针对移动端开发，默认位于地图左下方。
var MapTypeControl = new BMap.MapTypeControl();
map.addControl(MapTypeControl);
  • 应用
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      *{
        margin: 0;
        padding: 0;
      }
      html,
      body {
        width: 100%;
        height: 100%;
        background: greenyellow;
      }
    </style>
  </head>
  <body>
    <button type="button" name="button" id="btn">定位</button>
    <div id="map" style="width:100%;height:100%;"></div>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
  <script src="http://api.map.baidu.com/api?v=2.0&ak=5aiK2z3bGTyMnInk6vjL0tZrU8GKHhl9" type="text/javascript"></script>
  <script type="text/javascript">
      var map = new BMap.Map("map");
      initMap();
      initPosition();
    function initMap(){
      var opts = {
        anchor: BMAP_ANCHOR_BOTTOM_LEFT,
        offset:new BMap.Size(200,200),
        type:BMAP_NAVIGATION_CONTROL_LARGE
      }
      map.centerAndZoom("北京",20);
      var MapTypeControl = new BMap.MapTypeControl(opts);
      map.addControl(MapTypeControl);
      var NavigationControl = new BMap.NavigationControl();
      map.addControl(NavigationControl);
    }
    function initPosition(){
      $('#btn').click(function(){
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(successCallback);
      })
      function successCallback(position){
        //console.log(position);
        //var point = new BMap.Point(latitude,langtitude);
        map.centerAndZoom(position.point,20);
        //console.log(map.getCenter());
      }
    }
  </script>
  </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容