Question

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

enter image description here

这是我的代码

<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);

方法包含返回一个布尔值，表示点（currPos）是否在圆圈内。

以下是此示例：http://jsfiddle.net/kaiser/wzcst/

如何在标记离开给定区域时发出警报

1 个答案: