

google map APIを利用して、地図上の2点の半径を表示させ、円同士が重ならなかった時に”出店可”、重なった時に”出店不可”を返したいです。

現状、googleマップで、緯度経度を指定した箇所にピンを置き、半径◯ｍの円を引く機能まで実現する所までが出来たのですが、

  1. 2点目以降の地図のピンと半径を置く
  2. 2つの点の半径同士が重なった時に「出店可」「出店不可」の結果を返す処理

の２つが出来ておりません。  
お知恵をお貸し頂けますと幸いです。  
何卒よろしくお願いします。

[code]

    <body>
        <!-- Map -->
        <p class="bar">
            <input type="text" name="name" size="30" maxlength="20">
        </p>
    
        <div id="map"></div>
    
        <!-- Map -->
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    
        <!--    <div id="map"></div>-->
        <script type="text/javascript">
            var map;
            console.log(document.getElementById('map'));
    
            function initMap() {
                var latlng = new google.maps.LatLng(35.681382, 139.766084);
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                });
                var marker2 = new google.maps.Marker({
                    position:  {lat: 35.681382, lng: 139.766084},
                    map: map,
                    title: 'Hello World!'
                });
    
                //            map = new Map( elem, obj );
    
                map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 12,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    scaleControl: true,
                    scrollwheel: true
                });
    
                            new google.maps.Circle({
                                center: latlng,
                                fillColor: '#ff0000',
                                fillOpacity: 0.5,
                                map: map,
                                radius: 2000,
                                strokeColor: '#ff0000',
                                strokeOpacity: 1,
                                strokeWeight: 1
                            });
            }
        </script>
        <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5o9PRJhKBWmTMFb_Ep62sfDWrMPbdGu8&callback=initMap">
        </script>
    </body>
    
[/code]


CC BY-SA 4.0
2016-04-20T11:28:30.603
24252
2019-12-23T06:06:52.440
2019-12-23T06:06:52.440
3060
14665
question
javascript google-maps
google map APIを利用して、2つの点の半径が重なっているかを判定したい


円同士が重なっているかどうかは、「2地点間の距離」と「2つの円の半径の和」を比較することで判定します。2地点間の距離の計算にはgeometryライブラリの`computeDistanceBetween()`メソッドを利用するのが簡便です。

2地点目以降をどのように配置したいのかが不明ですが、クリックした地点に配置する方法でサンプルプログラムを書いてみました。「スニペットを実行」し、マップ上でクリックしてみてください。

[code]

    var radius = 3000;
    var zoom = 12;
    var mapCenter = new google.maps.LatLng(35.681382, 139.766084);
    var marker1Position = mapCenter;
    
    
    var map = new google.maps.Map(document.getElementById('map'), {
      center: mapCenter,
      zoom: zoom
    });
    
    var marker1 = new google.maps.Marker({
      position: marker1Position,
      map: map
    });
    
    var circle1 = new google.maps.Circle({
      center: marker1Position,
      fillColor: '#ff0000',
      fillOpacity: 0.5,
      radius: radius,
      map: map
    });
    
    var marker2 = new google.maps.Marker({
      map: map
    });
    
    var circle2 = new google.maps.Circle({
      fillColor: '#00ff00',
      fillOpacity: 0.5,
      radius: radius,
      map: map
    });
    
    
    map.addListener('click', function(e) {
      var marker2Position = e.latLng;
      marker2.setPosition(marker2Position);
      circle2.setCenter(marker2Position);
    
      if (intersect(circle1, circle2)) {
        alert("NG!");
      } else {
        alert("OK!");
      }
    });
    
    
    function intersect(_circle1, _circle2){
      return google.maps.geometry.spherical.computeDistanceBetween(_circle1.getCenter(), _circle2.getCenter()) < _circle1.getRadius() + _circle2.getRadius();
    }
[/code]

[code]

    body,html{
      height: 100%;
    }
    #map{
      width: 100%;
      height: 100%;
    }
[/code]

[code]

    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
[/code]


CC BY-SA 3.0
2016-04-22T12:43:37.217
24262
2016-04-23T02:23:57.300
2016-04-23T02:23:57.300
8532
8532
24252
answer