html如何找坐标,html5

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

视图部分代码

点击这个按钮，获得您的位置：

试一下

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 +

"
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);

}

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

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