当前位置: 首页 > 编程笔记 >

js+html5获取用户地理位置信息并在Google地图上显示的方法

岳允晨
2023-03-14
本文向大家介绍js+html5获取用户地理位置信息并在Google地图上显示的方法,包括了js+html5获取用户地理位置信息并在Google地图上显示的方法的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了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程序设计有所帮助。

 类似资料:
  • 本文向大家介绍如何最好地在Google地图上显示HTML5地理位置的准确性?,包括了如何最好地在Google地图上显示HTML5地理位置的准确性?的使用技巧和注意事项,需要的朋友参考一下 要在Google Map上显示HTML5地理位置的准确性,请使用以下代码-

  • 问题内容: 我正在开发一个包含3个活动的android应用程序,其中一个是map。我正在使用谷歌地图 我想要的是: 当用户打开活动(地图)时,它将向用户显示她的位置而不是坐标。 用户还应该能够通过使用大头针定位(固定)任何地方,而我的应用程序必须将此大头针的坐标存储在变量中,以便以后使用。 这是CustomPinpoint类 问题答案: 我已经实现了您想要的相同的东西。我为您提供示例代码。在这种情

  • Since 10.0.18 getCurrentLocation 新接口 getCurrentLocation 获取当前设备所在的地理位置信息,包括经纬度、准确度、逆地理编码、POI地址等,与此前 getLocation 老接口的参数和错误码定义 不 兼 容 ! 使用方法 AlipayJSBridge.call('getCurrentLocation', { cacheTimeout, req

  • ap.getLocation(OPTION, CALLBACK) 获取当前的地理位置信息。 OPTION 参数说明 名称 类型 必填 描述 cacheTimeout Number 否 钱包经纬度定位缓存过期时间,单位秒。默认 30s。使用缓存会加快定位速度,缓存过期会重新定位 type Number 否 支持 0:详细逆地理编码,带周边信;1:逆地理编码到城市;2:仅获取经纬度、速度和精度。默认为

  • 本文向大家介绍如何使用HTML5地理位置和Google Maps显示当前位置?,包括了如何使用HTML5地理位置和Google Maps显示当前位置?的使用技巧和注意事项,需要的朋友参考一下 HTML5 Geolocation API使您可以与自己喜欢的网站共享位置。Javascript可以捕获您的纬度和经度,并且可以发送到后端Web服务器,并可以进行精美的位置感知操作,例如查找本地商家或在映射上

  • 本文向大家介绍JS获取当前地理位置的方法,包括了JS获取当前地理位置的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JS获取当前地理位置方法的具体代码,供大家参考,具体内容如下 1.手机定位 前提要引入百度API: <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>