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 に答える