当标记离开给定区域时如何获得警报

Question

我是 google 地图的新手，我想在标记不在给定区域时发出警报，我已经创建了地图并添加了一个圆圈来表示标记的区域可以允许移动，

这是我的代码

<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">


    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
    <script type="text/javascript">

        // Basic Variables
        var map, marker, myLatlng;
        var Location;
        var LAT = 6.9342150;
        var LONG = 79.8919810;



        function loadMap() {

            myLatlng = new google.maps.LatLng(LAT, LONG);
            var mapOptions = {
                zoom: 14,
                center: myLatlng
            }
            map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

            google.maps.event.addListener(map, 'click', function() {
                infowindow.close();
            });


            // To add the marker to the map, use the 'map' property


            marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                // This allows me to drag the mark through map
                draggable: true,
                // Bounce the marker when it adds to the Map
                animation: google.maps.Animation.DROP,
                title: "Hello World!"


            });

         var CicleOption = {
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35,
                map: map,
                center: myLatlng,
                radius: 1000
            };

            new google.maps.Circle(CicleOption);

            // To add the marker to the map, call setMap();
            marker.setMap(marker);


        }
    </script>
</head>
<body onload="loadMap()">
    <div id="map-canvas" style="height:350px;"></div>
</body>

我想在标记离开圆圈时得到提醒，

标记 可拖动

谢谢。

Answer 1

我有一个解决方案，请看第 65 行到第 77 行。当标记放在圆圈外时，它会再次移动到圆圈的中间，地图再次居中。

<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">


    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
    <script type="text/javascript">

        // Basic Variables
        var map, marker, myLatlng;
        var Location;
        var LAT = 6.9342150;
        var LONG = 79.8919810;

        function loadMap() {

            myLatlng = new google.maps.LatLng(LAT, LONG);
            var mapOptions = {
                zoom: 14,
                center: myLatlng
            }
            map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

            google.maps.event.addListener(map, 'click', function() {
                infowindow.close();
            });


            // To add the marker to the map, use the 'map' property


            marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                // This allows me to drag the mark through map
                draggable: true,
                // Bounce the marker when it adds to the Map
                animation: google.maps.Animation.DROP,
                title: "Hello World!"


            });

         var CicleOption = {
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35,
                map: map,
                center: myLatlng,
                radius: 1000
            };

            new google.maps.Circle(CicleOption);

            // To add the marker to the map, call setMap();
            marker.setMap(map);


            // THIS IS ADDED

            google.maps.event.addListener(marker,'dragend',function(event) {

            var currPos = new google.maps.LatLng(event.latLng.k, event.latLng.B);

              var dist = getDistance(currPos, CicleOption.center);

              if(dist > CicleOption.radius){
                 alert('Marker is outside');
                 marker.setPosition(CicleOption.center);
                 map.setCenter(CicleOption.center);
              }

            });

        }

        var rad = function(x) {
          return x * Math.PI / 180;
        };

        var getDistance = function(p1, p2) {
          var R = 6378137; // Earth’s mean radius in meter
          var dLat = rad(p2.lat() - p1.lat());
          var dLong = rad(p2.lng() - p1.lng());
          var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
            Math.cos(rad(p1.lat())) * Math.cos(rad(p2.lat())) *
            Math.sin(dLong / 2) * Math.sin(dLong / 2);
          var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
          var d = R * c;
          return d; // returns the distance in meter
        };

    </script>
</head>
<body onload="loadMap()">
    <div id="map-canvas" style="height:350px;"></div>
</body>

此外，您可以使用 google-maps-lib 进行检查：

var cirlce = new google.maps.Circle(options);
var bounds = circle.getBounds();

var currPos = new google.maps.LatLng(lat, lng);
bounds.contains(currPos);

方法包含 return 一个布尔值，指示点(currPos) 是否在圆内。

这是一个例子：http://jsfiddle.net/kaiser/wzcst/

当标记离开给定区域时如何获得警报

How to get an alert when marker is out from the given area

javascript

google-maps