0

「インフルエンス」という円があり、円の端にマーカーを作成したいです。私はそれを行う方法を考えることはできません。

私のサークルはこのように設定されています -

var influenceOptions = {
    strokeColor: "#00CC00",
    strokeOpacity: 0.7,
    strokeWeight: 0.5,
    fillColor: "#00CC00",
    fillOpacity: 0.35,
    map: map,
    center: latlng,
    radius: 30
};
influence = new google.maps.Circle(influenceOptions);

その円のランダムな点にマーカーを作成するにはどうすればよいですか?

更新: http://jsfiddle.net/jArU2/4/

この円の端に新しいマーカーを追加するにはどうすればよいですか?

4

1 に答える 1

4

使用する

  1. Math.random()* 360 ランダムな見出しを取得する
  2. google.maps.Circle.getRadiusを使用して円の半径を取得します
  3. google.maps.geometry.spherical.computeOffsetを使用して、円のランダムな方向でポイントを計算します。注: これには、ジオメトリ ライブラリを含める必要があります。
  4. マップ変数をグローバルにして、すべてが機能するようにします

更新されたフィドル

function addInfluence(latlng){
    you = new google.maps.Marker({
                                 map: map,
                                 position: latlng,
                                 });
    
    var influenceOptions = {
      strokeColor: "#00CC00",
      strokeOpacity: 0.7,
      strokeWeight: 0.5,
      fillColor: "#00CC00",
      fillOpacity: 0.35,
      map: map,
      center: latlng,
      radius: 3000
    };
    influence = new google.maps.Circle(influenceOptions);
    var bearing = Math.random()*360;
    var newPoint = google.maps.geometry.spherical.computeOffset(latlng,influence.getRadius(), bearing);
    var marker2 = new google.maps.Marker({map:map, position:newPoint});
    map.fitBounds(influence.getBounds());
}

ここに画像の説明を入力

コードスニペット：

var map;
jQuery(document).ready(function() {
  var latlng = new google.maps.LatLng(40.747688, -74.004142);

  var options = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
  map = new google.maps.Map($('#map')[0], options);

  addInfluence(latlng);
});

function addInfluence(latlng) {
  you = new google.maps.Marker({
    map: map,
    position: latlng,
  });

  var influenceOptions = {
    strokeColor: "#00CC00",
    strokeOpacity: 0.7,
    strokeWeight: 0.5,
    fillColor: "#00CC00",
    fillOpacity: 0.35,
    map: map,
    center: latlng,
    radius: 3000
  };
  influence = new google.maps.Circle(influenceOptions);
  var bearing = Math.random() * 360;
  var newPoint = google.maps.geometry.spherical.computeOffset(latlng, influence.getRadius(), bearing);
  var marker2 = new google.maps.Marker({
    map: map,
    position: newPoint
  });
  map.fitBounds(influence.getBounds());
}
#map {
  height: 100%;
  width: 100%;
}

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry"></script>

<div id="map"></div>

于 2013-07-18T11:45:20.350 に答える