通过html5和javascript获取用户地理位置

我试图通过 HTML5 geolcation api获取用户的地理位置,我使用以下代码段：

if (navigator.geolocation) {
    var timeoutVal = 10 * 1000 * 1000;
    navigator.geolocation.getCurrentPosition(
      displayPosition,displayError,{ enableHighAccuracy: true,timeout: timeoutVal,maximumAge: 0 }
    );
  }
  else {
     // DO SOME STUFF HERE
  }
 
 
  function displayPosition(position) {
 
    // configuration
    var myZoom = 12;
    var myMarkerIsDraggable = true;
    var myCoordsLenght = 6;
    var defaultLat = position.coords.latitude;
    var defaultLng = position.coords.longitude;
    document.getElementById('latitude').value = defaultLat;
    document.getElementById('longitude').value = defaultLng;
    /*
      1. creates the map
      2. zooms
      3. centers the map
      4. sets the map’s type
    */
    var map = new google.maps.Map(document.getElementById('canvas'),{
      zoom: myZoom,center: new google.maps.LatLng(defaultLat,defaultLng),mapTypeId: google.maps.MapTypeId.ROADMAP
    });
 
 
    });
    // centers the map on markers coords
    map.setCenter(myMarker.position);
    // adds the marker on the map
    myMarker.setMap(map);
  }
 
  function displayError(error) {
    var errors = { 
      1: 'Permission denied',2: 'Position unavailable',3: 'Request timeout'
    };
    alert("Error: " + errors[error.code]);
  }
});

上述方法的麻烦在于,很少有用户发现使用起来很困难.几次,他们点击了拒绝,而不是允许,并保持盯着屏幕.所以从可用性的角度来看,我认为一个好办法是：

>请他们许可.
>等待3秒钟,如果他们点击拒绝或不响应,则使用IP在地图上显示地理.

我如何在上面的代码片段中完成第二步.
请让我知道,谢谢！
但是,什么是更好的处理方式

解决方法

这是一个我之前写过的一个脚本( geolocator.js),最近更新了.

更新：Geolocator v2发布.

特征：

> HTML5地理位置(按用户权限)
> IP位置
>地理编码(地址坐标)
>反向地理编码(坐标地址查找)
>完整的地址信息(街道,城镇,邻里,地区,
国家,国家代码,邮政编码等)
回退机制(从HTML5地理位置到IP地理查找)
>观看地理位置
>获取距离矩阵和持续时间
>计算两个地理点之间的距离
>获取时区信息
>获取客户端IP
>支持Google Loader(动态加载Google地图)
>动态创建Google地图(带标记,信息窗口,自动调整缩放)
>非阻塞脚本加载(外部源在运行时加载而不中断页面加载)

见live demo.
见API documentation.

用法：

var options = {
    enableHighAccuracy: true,timeout: 6000,maximumAge: 0,desiredAccuracy: 30,// meters
    fallbackToIP: true,// get location by IP if geolocation fails or rejected
    addressLookup: true,// requires Google API key
    timezone: true,// requires Google API key
    map: "my-map" // creates a Google map. requires Google API key
};
geolocator.locate(options,function (err,location) {
    console.log(err || location);
});

示例输出：

{
    coords: {
        latitude: 37.4224764,longitude: -122.0842499,accuracy: 30,altitude: null,altitudeAccuracy: null,heading: null,speed: null
    },address: {
        commonName: "",street: "Amphitheatre Pkwy",route: "Amphitheatre Pkwy",streetNumber: "1600",neighborhood: "",town: "",city: "Mountain View",region: "Santa Clara County",state: "California",stateCode: "CA",postalCode: "94043",country: "United States",countryCode: "US"
    },formattedAddress: "1600 Amphitheatre Parkway,Mountain View,CA 94043,USA",type: "ROOFTOP",placeId: "ChIJ2eUgeAK6j4ARbn5u_wAGqWA",timezone: {
        id: "America/Los_Angeles",name: "Pacific Standard Time",abbr: "PST",dstOffset: 0,rawOffset: -28800
    },flag: "//cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.3.1/flags/4x3/us.svg",map: {
        element: HTMLElement,instance: Object,// google.maps.Map
        marker: Object,// google.maps.Marker
        infoWindow: Object,// google.maps.InfoWindow
        options: Object // map options
    },timestamp: 1456795956380
}

通过html5和javascript获取用户地理位置

解决方法

猜你在找的HTML5相关文章