ホームページ > 記事 > ウェブフロントエンド > ユーザーの地理的位置情報を取得し、Google マップに表示する js html5 メソッド_javascript スキル
この記事の例では、js html5 を使用してユーザーの地理的位置情報を取得し、Google マップに表示する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。
<!DOCTYPE html> <html> <body> <p id="demo">Click the button to get your position:</p> <button onclick="getLocation()">Try It</button> <div id="mapholder"></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) { var latlon=position.coords.latitude+","+position.coords.longitude; var img_url="http://maps.googleapis.com/maps/api/staticmap?center=" +latlon+"&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />"; } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } } </script> </body> </html>
この記事が皆さんの Web プログラミング設計に役立つことを願っています。