Fatal编程技术网
  • javascript/
  • Javascript 如果用户已关闭并触发特定事件，请检查位置数组

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

javascript google-maps google-maps-api-3 geolocation

Javascript 如果用户已关闭并触发特定事件，请检查位置数组,javascript,google-maps,google-maps-api-3,geolocation,google-maps-markers,Javascript,Google Maps,Google Maps Api 3,Geolocation,Google Maps Markers,我成功地确定了用户是否在单个标记的特定距离内。 接下来我要做的是检查脚本，如果用户靠近存储在一个数组中的多个位置之一。如果是，我想让脚本触发特定于相应位置的事件 这是我的密码： <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=true"></script> <script> var map,

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

这是我的密码：

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


var图，GeoMarker；
函数初始化（）{
变量映射选项={
泛控制：错误，
mapTypeControl:false，
街景控制：错误，
overviewMapControl:错误，
禁用双击缩放：false，
滚轮：错误，
缩放：17，
中心：新google.maps.LatLng（99.000,10.000），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（'map_canvas'），mapOptions）；
//标记
变量位置=[
['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；
对于（i=0；iabs（google.maps.geometry.spheremic.ComputedDistanceBetween（用户位置、兴趣位置））创建标记时，可以将它们存储在数组中，也可以将每个位置转换为该标记，并将位置数据存储在标记本身中。然后，您需要一个函数来循环该数组，检查并存储每个标记与用户的距离，将每个标记放置到一个新数组中以供临时使用。然后对标记进行排序按与用户的距离删除该新数组中的标记，然后从该数组中删除任何大于与用户的最大距离的标记。一旦有了此数组，如果其中还有任何标记，则您知道第一项是最接近的标记。您可以根据当前处理的标记确定希望发生的“事件”

例如，这里有一个演示，它使用鼠标后面的标记来模拟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>




寻宝
将鼠标悬停在地图上并靠近标记
函数初始化（）{
变量i，标记器，地质标记器，
gm=google.maps，
映射选项={
泛控制：错误，
mapTypeControl:false，
街景控制：错误，
overviewMapControl:错误，
禁用双击缩放：false，
滚轮：错误，
缩放：17，
中心：新google.maps.LatLng（49.452,11.077），
mapTypeId:google.maps.mapTypeId.ROADMAP
},
map=new gm.map（document.getElementById（'map_canvas'），mapOptions），
地点=[
[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]
],
infowindow=新的gm.infowindow（），
markersVisited=0，
bounds=新的gm.LatLngBounds（），
GeoMarker=新的通用标记({
职位：新gm.LatLng（100,0），
图标：'http://maps.google.com/mapfiles/kml/pal3/icon20.png'
});
gm.event.addListener（映射'mousemove'，函数（evt）{
GeoMarker.设置位置（电动车床）；
});
对于（i=0；i