Como mejor precisión de indicación de geolocalización HTML5 en un mapa Google

Question

me gustaría:

1. reunir la latitud, longitud y precisión de un usuario que utiliza HTML5
pantalla
2. que, en un mapa de Google como un punto
3. cambie el tamaño del punto y la escala del mapa para reflejar la precisión de la posición.

Esto debería ser posible, pero aún no he visto a nadie implementar esto.

Answer 1

Debería ser posible. De acuerdo con este article, el objeto de posición HTML5 devuelve la propiedad de precisión en metros.

La API de Google Map tiene la capacidad de dibujar círculos con un punto central (latitud y longitud) y un radio en metros.

Pienso en algo como esto:

var latitude = position.coords.latitude; 
var longitude = position.coords.longitude; 
var accuracy = position.coords.accuracy; 

var centerPosition = new google.maps.LatLng(latitude, longitude); 

var marker = new google.maps.Marker({ 
    position: centerPosition, 
    map: //your map, 
    icon: //the dot icon 
}); 

var circle = new google.maps.Circle({ 
    center: centerPosition, 
    radius: accuracy, 
    map: //your map, 
    fillColor: //color, 
    fillOpacity: //opacity from 0.0 to 1.0, 
    strokeColor: //stroke color, 
    strokeOpacity: //opacity from 0.0 to 1.0 
}); 

//set the zoom level to the circle's size 
map.fitBounds(circle.getBounds()); 

Answer 2

 
    var circle; 

    function initialize() { 
     // Create the map. 
     var mapOptions = { 
      zoom: 4, 
      center: new google.maps.LatLng(37.09024, -95.712891), 
      mapTypeId: google.maps.MapTypeId.TERRAIN 
     }; 

     var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

     // Construct the circle for each value in citymap. 
     // Note: We scale the area of the circle based on the population. 
     var populationOptions = { 
      strokeColor: '#FF0000', 
      strokeOpacity: 0.8, 
      strokeWeight: 2, 
      fillColor: '#FF0000', 
      fillOpacity: 0.35, 
      map: map, 
      center: citymap[city].center, 
      radius: Math.sqrt(citymap[city].population) * 100 
     }; 
     // Add the circle for this city to the map. 
     circle = new google.maps.Circle(populationOptions); 
    } 

Fuente: Google documentation