如何在Google地图上最佳地显示HTML5地理位置准确性

Question

我想:

1. 使用HTML5收集用户的纬度,经度和准确度
2. 在谷歌地图中显示为点
3. 更改点的大小以及地图的确实比例以反映位置的准确性.

这应该是可能的,但我还没有看到任何人实现这一点.

Answer 1

应该可以.根据这篇文章,HTML5位置对象以米为单位返回精度属性.

谷歌地图api能够绘制给定中心点(纬度,纬度)和半径(以米为单位)的圆圈.

我在想这样的事情:

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