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

问题描述

我正在尝试通过 html5 geolcation api 获取用户地理位置，我使用以下代码段:

if (navigator.geolocation) {var timeoutVal = 10 * 1000 * 1000;navigator.geolocation.getCurrentPosition(显示位置，显示错误，{ enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 });}别的 {//在这里做一些事情}功能显示位置(位置){//配置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.创建地图2.缩放3. 居中地图4.设置地图类型*/var map = new google.maps.Map(document.getElementById('canvas'), {缩放:我的缩放，中心:新的 google.maps.LatLng(defaultLat, defaultLng),mapTypeId:google.maps.MapTypeId.ROADMAP});});//将地图以标记坐标为中心map.setCenter(myMarker.position);//在地图上添加标记myMarker.setMap(地图);}函数显示错误(错误){变量错误 = {1: '权限被拒绝',2: '位置不可用',3: '请求超时'};alert("错误:" + 错误[error.code]);}});

上述方法的问题在于，很少有用户发现它难以使用.少数情况下，他们点击了 Deny 而不是 Allow 并一直盯着屏幕.所以从可用性的角度来看，我认为一个好的方法是:

1. 征求他们的同意.

2. 等待 3 秒，如果他们点击拒绝或没有响应，请使用 IP 在地图上显示地理定位.

我如何才能完成上述代码段中的第二步.请让我知道，谢谢！但是，有什么更好的处理方式

这是一个脚本 (

用法:

var options = {启用高精度:真，超时:6000，最大年龄:0，desiredAccuracy: 30,//米fallbackToIP: true,//如果地理定位失败或被拒绝，则通过 IP 获取位置addressLookup: true,//需要 Google API 密钥timezone: true,//需要 Google API 密钥地图:我的地图"//创建一个谷歌地图.需要 Google API 密钥};geolocator.locate(选项，功能(错误，位置){控制台日志(错误 || 位置)；});

示例输出:

{坐标:{纬度:37.4224764，经度:-122.0842499，准确度:30，高度:空，高度精度:空，标题:空，速度:无},地址: {通用名:"，街道:Amphitheatre Pkwy"，路线:Amphitheatre Pkwy"，街道编号:1600"，邻里:"，城镇:"，城市:山景"，地区:圣克拉拉县"，州:加利福尼亚"，状态代码:CA"，邮政编码:94043"，国家:美国"，国家代码:美国"},formattedAddress: "1600 Amphitheatre Parkway, Mountain View, CA 94043, USA",类型:屋顶"，placeId:ChIJ2eUgeAK6j4ARbn5u_wAGqWA"，时区: {id:美国/洛杉矶"，名称:太平洋标准时间"，缩写:PST"，dstOffset: 0,原始偏移量:-28800},标志://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.3.1/flags/4x3/us.svg"，地图: {元素:HTML元素，instance: Object,//google.maps.Mapmarker: Object,//google.maps.MarkerinfoWindow: Object,//google.maps.InfoWindowoptions: Object//地图选项},时间戳:1456795956380}

I am trying to get the users geolocation via the html5 geolcation api, and i use the following snippet for it:

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]);
  }
});

The trouble with the above approach is that, few of the users have found it difficult to use. Few of the times, they have clicked Deny instead of Allow and keep staring on the screen. So from usability point of view, I think a good approach would be:

1. Ask them for permission.

2. Wait for 3 seconds, if they click deny or don't respond, use IP to show the geolcation on the map.

How can I accomplish the second step in my above snippets. Please let me know, thanks! However, what would be a better way to handle

Here is a script (geolocator.js) I wrote some time ago and updated recently.

Update: Geolocator v2 is released.

Features:

• HTML5 geolocation (by user permission)
• Location by IP
• Geocoding (coordinates from address)
• Reverse Geocoding (address lookup from coordinates)
• Full address information (street, town, neighborhood, region, country, country code, postal code, etc...)
• Fallback mechanism (from HTML5-geolocation to IP-geo lookup)
• Watch geographic position
• Get distance matrix and duration
• Calculate distance between two geographic points
• Get timezone information
• Get client IP
• Supports Google Loader (loads Google Maps dynamically)
• Dynamically creates Google Maps (with marker, info window, auto-adjusted zoom)
• Non-blocking script loading (external sources are loaded on the fly without interrupting page load)

See a live demo.
See API documentation.

Usage:

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);
});

Example Output:

{
    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模板网！