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

Question

我正在尝试通过 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]);
  }
});

上述方法的问题在于，很少有用户发现它难以使用。很少有几次，他们点击了拒绝而不是允许并一直盯着屏幕。所以从可用性的 Angular 来看，我认为一个好的方法是:

1. 征得他们的同意。

2. 等待 3 秒，如果他们单击拒绝或不响应，请使用 IP 在 map 上显示地理定位。

如何完成上述代码段中的第二步。请让我知道，谢谢!但是，有什么更好的方法来处理

Answer 1

这是我前一段时间写的脚本 ( geolocator.js )，最近更新了。

更新:Geolocator v2 已发布。

特点:

• HTML5 地理定位(经用户许可)
• IP 定位
• 地理编码(地址坐标)
• 反向地理编码(从坐标查找地址)
• 完整地址信息(街道、城镇、社区、地区、国家、国家代码、邮政编码等...)
• 回退机制(从 HTML5 地理定位到 IP 地理查找)
• 观察地理位置
• 获取距离矩阵和时长
• 计算两个地理点之间的距离
• 获取时区信息
• 获取客户端IP
• 支持 Google Loader(动态加载 Google map )
• 动态创建 Google map (带有标记、信息窗口、自动调整缩放比例)
• 非阻塞脚本加载(外部资源在不中断页面加载的情况下即时加载)

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