如何在谷歌地圖上最佳顯示HTML5地理定位精度

Question

我想：

1. 收集使用HTML5
2. 顯示用戶的緯度，經度和精確度，在一個谷歌地圖作爲一個點
3. 更改點的大小和地圖的比例以反映位置的準確性。

這應該是可能的，但我還沒有看到任何人實現這一點。

Answer 1

應該可以的。根據此article，HTML5位置對象以米爲單位返回精度屬性。

谷歌地圖api有能力繪製以圓心爲中心點（lat，lng）和以米爲單位的半徑。

我想是這樣的：

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

來源：Google documentation