I want to use the google map API to determine if the radii of the two points overlap.

I would like to use the google map API to display the radius of the two points on the map and return "store opening allowed" when the circles do not overlap, and "store opening not allowed" when overlapping.

Currently, Google Maps has even realized the function of placing pins at places where latitude and longitude are specified and drawing a circle with radius mm.

There are two things that have not been completed.
I would appreciate it if you could lend me your wisdom.
Thank you for your cooperation.

<body>
    <!--Map-->
    <p class="bar">
        <input type="text" name="name" size="30" maxlength="20">
    </p>

    <divid="map"></div>

    <!--Map-->
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

    <!---<divid="map"></div>-->
    <script type="text/javascript">
        varmap;
        console.log( document.getElementById('map'));

        function initMap(){
            var latlng = new google.maps.LatLng (35.681382, 139.766084);
            varmarker = new google.maps.Marker({
                position:latlng,
                map —map
            });
            varmarker2 = 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 prefer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5o9PRJhKBWmTMFb_Ep62sfDWrMPbdGu8&callback=initMap">
    </script>
</body>

javascript google-maps

2022-09-30 21:15

1 Answers

Whether or not the circles overlap each other is determined by comparing the distance between the two points and the sum of the radii of the two circles.The geometry library's computeDistanceBetween() method is easy to calculate the distance between two points.

I don't know how you want to place the second point or later, but I wrote a sample program by placing it at the point I clicked on.Try "Run Snippet" and click on the map.

var radius=3000;
var zoom = 12;
varmapCenter = new google.maps.LatLng (35.681382, 139.766084);
varmarker1 Position=mapCenter;


varmap = new google.maps.Map( document.getElementById('map'), {
  center:mapCenter,
  zoom —Zoom
});

varmarker1 = new google.maps.Marker({
  position: marker1 Position,
  map —map
});

var circle1 = new google.maps.Circle({
  center: marker1 Position,
  fillColor: '#ff0000',
  fillOpacity: 0.5,
  radius —radius,
  map —map
});

varmarker2 = 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){
  varmarker2Position=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.sphere.computeDistanceBetween(_circle1.getCenter(),_circle2.getCenter())<_circle1.getRadius()+_circle2.getRadius();
}

body,html{
  height —100%;
}
#map{
  width: 100%;
  height —100%;
}

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

2022-09-30 21:15

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656