Question

我成功地确定用户是否在单个标记的特定距离内。如果用户接近存储在数组中的多个位置之一，我接下来要做的就是检查脚本。如果是，我想让脚本触发特定于相应位置的事件。

这是我的代码：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=true"></script>
<script>
    var map, GeoMarker;

  function initialize() {
    var mapOptions = {
        panControl: false,
        mapTypeControl: false,
        streetViewControl: false,
        overviewMapControl: false,
        disableDoubleClickZoom: false,  
      scrollwheel: false,
      zoom: 17,
      center: new google.maps.LatLng(99.000, 10.000),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

// Markers

var locations = [
  ['1', 49.463344,11.079942, 6],
  ['2', 49.462309,11.078335, 4],
  ['3', 49.463466,11.084214, 5],
  ['4', 49.46348,11.076061, 3],
  ['5', 49.464345,11.07885, 2],
  ['6', 49.461095,11.079601, 1]
];

var infowindow = new google.maps.InfoWindow();

var mark1, i;

for (i = 0; i < locations.length; i++) {  
  mark1 = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });
google.maps.event.addListener(mark1, 'click', (function(mark1, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, mark1);
    }
  })(mark1, i));
}

GeoMarker = new GeolocationMarker();

var IsWithinRadius = false;
var RadiusInMeters = 10;
var LocationOfInterest = new google.maps.LatLng(49.463344,11.079942); // Needs to be a variable!

google.maps.event.addListener(GeoMarker, 'position_changed', function() {map.setCenter(this.getPosition());

var UserPosition = this.getPosition();

var DisplayElement = document.getElementById('UserCoordinates');
if(UserPosition === null) {IsWithinRadius = false;}

var IsCurrentPositionInRadius = 
Math.abs(google.maps.geometry.spherical.computeDistanceBetween(UserPosition, LocationOfInterest)) <= RadiusInMeters; // Radius reached?
var JustEnteredRadius = !IsWithinRadius && IsCurrentPositionInRadius; // Radius reached!
IsWithinRadius = IsCurrentPositionInRadius;

if(JustEnteredRadius) {
// Trigger Event
}
}
});

GeoMarker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

如您所见，我有一个脚本可以检查用户是否在特定坐标周围10米范围内。 如何修改我的脚本以检查其中的所有位置？

非常感谢！

Answer 1

创建标记时，要么将它们存储在数组中，要么只是将每个位置转换为该标记，并将位置数据存储在标记中。然后，您需要一个函数来遍历该数组，并检查并存储每个标记距离用户，将每个标记放入一个新的数组以供临时使用。然后按距离用户的距离对新阵列中的标记进行排序，然后从该阵列中删除任何大于距用户最大距离的标记。一旦你有这个数组，如果还有任何东西，你知道第一个项目是最接近的标记。根据您当前正在处理的标记，确定您希望发生的“事件”。

例如，这是一个演示，它使用鼠标后面的标记来模拟GeolocationMarker的一个实例。请注意，对于此示例，radiusInMeters设置为100米以使演示更易于启动，并且演示也仅对尚未被用户“访问”的标记起作用。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Markers Treasure Hunt</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry&sensor=false"></script>
</head>
<body>
<div id="map_canvas" style="width:500px; height:400px; margin:0 auto;"></div>
<div id="UserCoordinates" style="text-align:center;">Mouse over the map and go close to the markers</div>
<script>

function initialize() {
    var i, marker, GeoMarker,
        gm = google.maps,
        mapOptions = {
            panControl: false,
            mapTypeControl: false,
            streetViewControl: false,
            overviewMapControl: false,
            disableDoubleClickZoom: false,
            scrollwheel: false,
            zoom: 17,
            center: new google.maps.LatLng(49.452, 11.077),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        },
        map = new gm.Map(document.getElementById('map_canvas'), mapOptions),
        locations = [
            ['Treasure 1', 49.463344, 11.079942, 6],
            ['Treasure 2', 49.462309, 11.078335, 4],
            ['Treasure 3', 49.463466, 11.084214, 5],
            ['Treasure 4', 49.46348, 11.076061, 3],
            ['Treasure 5', 49.464345, 11.07885, 2],
            ['Treasure 6', 49.461095, 11.079601, 1]
        ],
        infowindow = new gm.InfoWindow(),
        markersVisited = 0,
        bounds = new gm.LatLngBounds(),
        GeoMarker = new gm.Marker({
            position: new gm.LatLng(100, 0),
            icon: 'http://maps.google.com/mapfiles/kml/pal3/icon20.png'
    });
    gm.event.addListener(map, 'mousemove', function (evt) {
        GeoMarker.setPosition(evt.latLng);
    });
    for (i = 0; i < locations.length; i++) {
        latLng = new gm.LatLng(locations[i][1], locations[i][2]);
        bounds.extend(latLng);
        marker = new gm.Marker({
            position: latLng,
            map: map,
            icon: 'http://google.com/mapfiles/kml/paddle/'+ (i + 1) +'-lv.png',
            index: i,
            title: locations[i][0],
            data: locations[i][3],
            visited: false
        });
        gm.event.addListener(marker, 'click', function () {
            infowindow.setContent(this.title);
            infowindow.open(map, this);
        });
        locations[i] = marker;
    }
    map.fitBounds(bounds);
    function getClosestMarkers(userPosition, maxDistance) {
        var i, marker, mPos,
            len = locations.length,
            arr = [];
         //assign distanceFromUser for all markers
        for (i = 0; i < len; i++) {
            marker = locations[i];
            mPos = marker.getPosition();
            marker.distanceFromUser = gm.geometry.spherical.computeDistanceBetween(userPosition, mPos);
             //ignoring markers which have been 'visited' already, if they
             //have not yet been 'visited', store them in arr
            if (!marker.visited) {
                arr.push(marker);
            }
        }
         //arrange items in arr by distanceFromUser, closest to furthest
        arr.sort(function (m1, m2) {
            var a = m1.distanceFromUser,
                b = m2.distanceFromUser;
            if (a == b) {
                return 0;
            }
            return (a > b) ? 1 : -1;
        });
         //remove all markers from arr which are greater than maxDistance away from userPosition
        for (i = arr.length - 1; i >= 0; i--) {
            marker = arr[i];
            if (marker.distanceFromUser > maxDistance) {
                arr.pop();
            }
        }
        return arr;
    }
    gm.event.addListener(
        GeoMarker,
        'position_changed',
        function () {
            var marker, closestMarkers,
                radiusInMeters = 100,
                userPosition = this.getPosition(),
                displayElement = document.getElementById('UserCoordinates');
            if (userPosition === null) {
                return;
            }
            //only use the below line with your actual GeoMarker instance of GeolocationMarker
            //map.setCenter(userPosition);
            closestMarkers = getClosestMarkers(userPosition, radiusInMeters);
            if (markersVisited == locations.length) {
                displayElement.innerHTML = 'All markers already found';
            } else if (closestMarkers.length) {
                //here is where you would determine what event to trigger,
                //based upon which marker closestMarkers[0] is
                //location.replace("puzzle.php");
                marker = closestMarkers[0];
                displayElement.innerHTML = marker.title;
                displayElement.innerHTML += ', marker.data = '+ marker.data +', marker.index = '+ marker.index;
                marker.visited = true;
                markersVisited++;
            }
        }
    );
    GeoMarker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

</script>
</body>
</html>

示例小提琴：http://jsfiddle.net/uXpGD/

希望你能看到如何在那里加入GeolocationMarker而不是mousemove的东西，基本上只需要添加GeolocationMarker脚本，在地图上移除mousemove的事件监听器，创建你的GeolocationMarker而不是这里使用的Marker，并取消注释map_setCenter（userPosition）在position_changed事件处理程序中调用。哦，并将radiusInMeters改回10

如果用户关闭并触发特定事件，请检查位置数组

1 个答案: