[原创] html5获取坐标和位置信息

html5 geolocation

2015-07-27 2384

使用html5的geolocation方法获取坐标信息,通过百度api的地址解析服务获取坐标对应的地理位置信息

视图部分代码

<p id="demo">点击这个按钮,获得您的位置:</p>
<button onclick="getLocation()">试一下</button>
<div id="demo"></div>

<script>
    var x=document.getElementById("demo");
    function getLocation()
    {
        if (navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(showPosition,showError);
        }
        else{x.innerHTML="Geolocation is not supported by this browser.";}
    }
    function showPosition(position)
    {
        x.innerHTML="Latitude: " + position.coords.latitude +
                "<br />Longitude: " + position.coords.longitude;

        window.location.href = "/common/geo_demo.json?lat="+position.coords.latitude+"&lng="+position.coords.longitude;

    }
    function showError(err)
    {
        console.log(err);
    }
</script>


控制器部分代码,获取坐标对应的位置信息

def geo_demo
    if !params[:lat].blank? && !params[:lng].blank?
      @geo_data = RestClient.get("http://api.map.baidu.com/geocoder?location=#{params[:lat]},#{params[:lng]}&output=json&key=E4805d16520de693a3fe707cdc962045")
    end
    page_head_data("geo_demo","","")
    #@geo_data
    respond_to do |format|
      format.html
      format.json {render json: @geo_data.as_json}
    end
  end