Question

我需要在我们的应用程序中设置半径圆圈到Google地图中，类似于 here （粉色半径圆圈）。

在最好的方式中，我需要指定半径的英里数。由于我们的应用程序是用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);

但是地图不是专注的。

Answer 1

使用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>

（更新了我对完整解决方案的回答）

如何在Google地图中制作半径圆？

1 个答案: