的Javascript HTML5位置按钮
问题描述:
<script>
navigator.geolocation.getCurrentPosition(show_position);
//This function does the work of getting the actual user coordinates
function show_position(position){
var lat = position.coords.latitude;
var longi = position.coords.longitude;
var tick = position.timestamp;
document.getElementById("Coord1").innerHTML=lat;
document.getElementById("Coord2").innerHTML=longi;
}
</script>
<p>Your Latitude is: <b id="Coord1" style="color:blue;"> </b></p>
<p>Your Longitude is: <b id="Coord2" style="color:blue;"> </b> </p>
我试图运行这段代码,它似乎正常工作。但是,是否可以创建一个运行navigator.geolocation.getCurrentPosition(show_position);
的JavaScript按钮?我有一个搜索框,我想在它旁边有一个按钮,当用户点击它时,它会自动填充空白框然后搜索。不知道这是否可能。
由于提前,
答
你可以在点击事件
x$("#btnInit").click(loadDemo);
//run the function
function loadDemo() {
navigator.geolocation.getCurrentPosition(show_position);
//This function does the work of getting the actual user coordinates
function show_position(position){
var lat = position.coords.latitude;
var longi = position.coords.longitude;
var tick = position.timestamp;
document.getElementById("Coord1").innerHTML=lat;
document.getElementById("Coord2").innerHTML=longi;
}
}
运行navigator.geolocation我一个使用xuijs因此X $在按钮的前面。它与document.getElementById(“btnInit”)相同
然后在页面上有一个id为btnInit的按钮。
答
<script>
document.getElementById('getPositionBtn').addEventListener('click', function() {
navigator.geolocation.getCurrentPosition(function(position) {
document.getElementById("Coord1").innerHTML=position.coords.latitude;
document.getElementById("Coord2").innerHTML=position.coords.longitude;
});
});
</script>
<p>Your Latitude is: <b id="Coord1" style="color:blue;"> </b></p>
<p>Your Longitude is: <b id="Coord2" style="color:blue;"> </b> </p><br>
<button id="getPositionBtn">Get Position!</button>