如何在谷歌地图上最好地显示 HTML5 地理位置的准确性答案

【问题标题】：How to best display HTML5 geolocation accuracy on a google map如何在谷歌地图上最好地显示 HTML5 地理位置的准确性
【发布时间】：2011-10-03 21:14:57
【问题描述】：

我想：

使用 HTML5 收集用户的纬度、经度和准确度
在谷歌地图中显示为一个点
更改点的大小和地图的实际比例以反映位置的准确性。

这应该是可能的，但我还没有看到有人实现这个。

【问题讨论】：

标签： html google-maps geolocation

【解决方案1】：

应该是可以的。根据article，HTML5 位置对象返回以米为单位的准确度属性。

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

【讨论】：

我一定还漏掉了一些东西。我已经在这里与您的示例一起工作，看看我是否可以将其确定为更多jsfiddle.net/mgifford/PhzsR/35 任何想法将不胜感激。
哎呀！，看起来我的代码示例中有一些拼写错误。我会更新它。这是更新的小提琴：jsfiddle.net/PhzsR/62
@BryanWeaver 即使关闭 HTTPS Everywhere 并在 jsfiddle 中使用非 HTTPS 请求，似乎也无法使用该小提琴 - 控制台中仍然存在错误:( 找到你。 .. 查找您的位置时出现权限被拒绝错误
@cottsak 该错误消息意味着您的浏览器正在阻止代码访问您的位置信息。您需要为您的特定浏览器启用定位服务。
@BryanWeaver 我不这么认为。我的 Chrome 被配置为“询问”位置，我没有在地址栏中看到通知/弹出窗口/图标，这通常表明浏览器正在请求用户的位置。

【解决方案2】：

变圆；函数初始化（）{ // 创建地图。 var mapOptions = { 缩放：4，中心：新的 google.maps.LatLng(37.09024, -95.712891), mapTypeId：google.maps.MapTypeId.TERRAIN }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // 为 citymap 中的每个值构造圆。 // 注意：我们根据人口来缩放圆的面积。 var 人口选项 = { strokeColor: '#FF0000', 中风不透明度：0.8，行程重量：2，填充颜色：'#FF0000', 填充不透明度：0.35，地图：地图，中心：citymap[city].center，半径：Math.sqrt(citymap[city].population) * 100 }; // 将此城市的圆圈添加到地图中。 circle = new google.maps.Circle(populationOptions); }

来源：Google documentation

【讨论】：