zoukankan      html  css  js  c++  java
  • html5 geolocation配合百度地图api实现定位

    1.了解html5 geolocation

    HTML5 Geolocation(地理定位)用于定位用户的位置。
    鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。=> 使用时会有请求提示框,需要用户点击确认。

    2.浏览器支持

    Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。
    对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确。

    3.一个实例。

    function position() {
        //判断浏览器是否支持定位
    	if(navigator.geolocation) {
    	    //这里接受两个参数 定位成功则执行第一个函数,否则执行第二个
    		navigator.geolocation.getCurrentPosition(showPosition, showError);
    	} else {
    		alert("不支持定位");
    	};
    };
    //接受一个参数 参数为对象
    function showPosition(position){
        //position中有一个coords 这个下面 有latitude:纬度  longitude:经度
        $.ajax({
    	  type: "get",
    	  url: "http://api.map.baidu.com/geocoder/v2/?callback=renderReverse&location=" + position.coords.latitude + "," + position.coords.longitude + "&output=json&pois=1&ak=DMCiysDe5wZUpPeTa7xZqUGnoFIUofmi",//这个ak可以去百度地图申请
    	  async: false,
    	  dataType:"jsonp",
    	  success: function(data) {//拿到返回的地址信息
    	    return data;
    	  }
        });
    };
    
    //err
    //接收一个错误参数
    function showError(error){
        switch(error.code) {
    	case error.PERMISSION_DENIED:
    	  alert("定位失败,用户拒绝请求地理定位");
    	  break;
    	case error.POSITION_UNAVAILABLE:
    	  alert("定位失败,位置信息是不可用");
    	  break;
    	case error.TIMEOUT:
    	  alert("定位失败,请求获取用户位置超时");
    	  break;
    	case error.UNKNOWN_ERROR:
    	  alert("定位失败,定位系统失效");
    	  break;
      };
    };
    

      



    
    
    
  • 相关阅读:
    洛谷-P1149 火柴棒等式
    洛谷-P1036 选题
    【linux】CPU,内存对网站的影响
    【jenkins】【java】【tomcat】windows host key verification failed
    【java】A local class access to local variables
    【java】类成员的访问限制关系
    【android】6大布局
    【android】android对位图文件的支持
    【android】签署应用采用相同证书的用处
    【markdown】图片的处理
  • 原文地址:https://www.cnblogs.com/maopixin/p/8514852.html
Copyright © 2011-2022 走看看