3

我需要在我们的应用程序中在 Google 地图中设置一个半径圆，类似于 这里（粉红色半径圆）。

以最好的方式，我需要指定半径的英里数。由于我们的应用程序是用 Ruby On Rails 编写的，我正在考虑只使用 Javascript 还是 gem 会更好。

非常感谢！

编辑：尝试：

var map;
    var miles = 3;
    function initialize() {
      var mapOptions = new google.maps.Circle({
          center: new google.maps.LatLng(51.476706,0),
          radius: miles * 1609.344,
          fillColor: "#ff69b4",
          fillOpacity: 0.5,
          strokeOpacity: 0.0,
          strokeWeight: 0,
          map: map
      });
      map = new google.maps.Map(document.getElementById('map_canvas'),  mapOptions);
    }
    google.maps.event.addDomListener(window, 'load', initialize);

但是地图没有初始化。

4

1 回答 1

3

使用 Maps API 向地图添加圆圈非常容易，请参阅 https://developers.google.com/maps/documentation/javascript/reference?csw=1#Circle

然后你只需要一些 JS 将英里转换为米。乘以 1609.344 其实应该可以。所以可能是这样的：

<!DOCTYPE html>
<html>
<head>
<title>Circle</title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map { height: 480px; width:600px; }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>

<script>
    function initialize() {
        var miles = 3;

        var map = new google.maps.Map(document.getElementById("map"), {
            zoom: 11,
            center: new google.maps.LatLng(51.476706, 0),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var circle = new google.maps.Circle({
            center: new google.maps.LatLng(51.476706, 0),
            radius: miles * 1609.344,
            fillColor: "#ff69b4",
            fillOpacity: 0.5,
            strokeOpacity: 0.0,
            strokeWeight: 0,
            map: map
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
  <div id="map"></div>
</body>
</html>

（更新了我的答案以获得完全有效的解决方案）

于 2013-09-12T11:14:45.250 回答