html - 如何在谷歌地图上最好地显示 HTML5 地理定位精度

Question

我愿意:

1. 使用 HTML5 收集用户的纬度、经度和准确性
2. 在谷歌地图中将其显示为一个点
3. 更改点的大小以及 map 的比例以反射(reflect)位置的准确性。

这应该是可行的，但我还没有看到任何人实现它。

Answer 1

应该可以。根据这个article HTML5 位置对象返回以米为单位的精度属性。

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