Question

<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按钮？我有一个搜索框，我想在它旁边有一个按钮，当用户点击它时，它会自动填空空框然后搜索。不知道那是否可能。

提前致谢，

Answer 1

您可以在点击事件

上运行navigator.geolocation

    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;

}
}

我使用xuijs因此按钮前面的x $。它与document.getElementById（“btnInit”）

相同

然后在页面上有一个id为btnInit的按钮。

Answer 2

<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>

Javascript html5位置按钮

2 个答案: