我有一个脚本展示了我在页面上实现的Google地图,目前它显示了由雷达搜索生成的一系列标记。我认为我可能已经将这些生成的标记放入了一个数组中,但我不确定如何做到这一点。我还查找了“haversine公式”,因为这似乎是计算地理位置和数组中的点之间距离的一种方法。我希望能够使用标签ID“#findMe”执行搜索,因此单击它将查找最接近我的地理位置的标记,然后打印一个提示信息。我已经尝试使用Google API内置方法,但我认为我需要将标记放入一个数组中。
修正后的代码 - 这样对吗Dr.Molle?
修正后的代码 - 这样对吗Dr.Molle?
jQuery(function($){
var $overlay = $('.overlay'),
resize = true,
map;
var service;
var marker = [];
var pos;
var infowindow;
var placeLoc
function initialize() {
/*var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}*/
var mapOptions = {
zoom: 15
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var request = {
location:pos,
radius:1000,
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request,callback);
pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'You Are Here'
});
$('#findMe').data('pos',pos);
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
function callback(results, status) {
var markers = [];
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
markers.push(createMarker(results[i]));
}
}
$('#findMe').data('markers',markers);
}
}
function createMarker(place) {
placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 8,
fillColor:'00a14b',
fillOpacity:0.3,
fillStroke: '00a14b',
strokeWeight:4,
strokeOpacity: 0.7
},
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
return marker;
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
$('#show').click(function(){
$overlay.show();
if ( resize ){
google.maps.event.trigger(map, 'resize');
resize = false;
}
});
$('.overlay-bg').click(function(){
$overlay.hide();
});
$( "#findMe" ).click(function() {
var pos = $(this).data('pos'),
markers = $(this).data('markers'),
closest;
if(!pos || !markers){
return;
}
$.each(markers,function(){
var distance=google.maps.geometry.spherical
.computeDistanceBetween(this.getPosition(),pos);
if(!closest || closest.distance > distance){
closest={marker:this,
distance:distance}
}
});
if(closest){
//closest.marker will be the nearest marker, do something with it
//here we simply trigger a click, which will open the InfoWindow
google.maps.event.trigger(closest.marker,'click')
}
});
});