html5获取地理位置 利用百度地图JavaScript API标注

2024年5月4日 互联网

HTML5 Geolocation API 用于获得用户的地理位置。使用时需要用户同意，否则用户位置信息是不可用的。

使用当前位置

浏览器支持

Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation（地理定位）.
注意: Geolocation（地理定位）对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。

获得用户的位置

检测浏览器是否支持，并用 getCurrentPosition() 方法来获得用户的位置。getCurrentPosition() 方法，第一个参数用于获取成功之后的操作，第二个参数用于处理错误，它规定当获取用户位置失败时运行的函数：

<script>
var x=document.getElementById("demo");
function getLocation(){if (navigator.geolocation){navigator.geolocation.getCurrentPosition(showPosition,showError);}else{x.innerHTML="该浏览器不支持获取地理位置。";}}
function showPosition(position){x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; }
function showError(error){switch(error.code) {case error.PERMISSION_DENIED:x.innerHTML="用户拒绝对获取地理位置的请求。"break;case error.POSITION_UNAVAILABLE:x.innerHTML="位置信息是不可用的。"break;case error.TIMEOUT:x.innerHTML="请求用户地理位置超时。"break;case error.UNKNOWN_ERROR:x.innerHTML="未知错误。"break;}}
</script>

百度地图api密钥申请

  1. 打开百度地图开发平台 http://developer.baidu.com/map/index.html
  2. 注册登陆，打开API控制台，创建应用
  3. 填写应用名称，选择应用类型，选择需要用到的服务，填写域名，提交。
  4. 获取密钥之后，在html中引用 
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"><meta
最新文章