javascript - 如何在 Google map 中使用圆圈而不是标记

Question

我创建了一个gist更干净地包含我的代码:

我正在创建一个显示位置列表的基本应用程序，但我想使用半径为 1000 米的圆圈，而不是显示确切位置的标记。目标是为这些地点增加一点隐私。页面上的文本的效果是:“ map 上的圆圈反射(reflect)了其他用户的大致位置”。虽然隐私并不是非常重要，但我不希望随意的人查看 map 并知道其他用户的地址。

我正在使用两个 gem:Geocoder 和 Gmaps4rails。地理编码工作正常。标记工作正常，但我不知道如何移动到圆圈。

gmaps4rails 开发者指出 ( Github page ) 圆圈是可能的，我只是不确定要更改什么。

预先感谢您的帮助。

Answer 1

您基本上只需要使用 SVG circular path 定义一个对象即可并将其分配给标记的 icon 属性。这是我完成类似操作的一段代码。请注意，您需要使用 path 定义和/或 scale 属性来获得您想要的结果，但这演示了整体配方:

// Somewhere in your code you define an object you'll use as an icon.
// You only need to instantiate this once.
var circleIcon = {
    path: 'M 0, 0 m -10, 0 a 10, 10 0 1, 0 20, 0 a 10, 10 0 1, 0 -20, 0',
    fillColor: '#00FFFF',
    fillOpacity: 0.0,
    scale: 1,
    strokeColor: '#00FFFF',
    strokeWeight: 2,
    strokeOpacity: 0.8
};


// Then elsewhere in your code you can create markers like this.
// Many markers can reference the same icon object.
var latLng = new google.maps.LatLng(33.9958, -80.8896);

var circleMarker = new google.maps.Marker({
    icon: circleIcon
    position: latLng,
    map: map
});


// Optionally, you can use methods like these set marker properties.
//circleMarker.setPosition(latLng );
//circleMarker.setVisible(true);
//circleMarker.setMap(map);

另一方面，关于保留“一点点隐私”，听起来你的圆圈中心仍然代表用户的真实位置。因此，您可能需要考虑向地理编码器输出的 LatLng 坐标引入一些微妙的随机偏移。基于a quick review of decimal degrees ，纬度和经度值的 +/- 0.001 到 0.009 的波动应该会给您带来大约 100 到 1000 米的晃动，这可能足以满足您的目的。如果我这样做，我可能会在开始使用之前查看一些样本点并将它们的真实位置与“随机偏移”位置进行比较，主要只是为了对其进行现实检查。