Я пытаюсь показать на одной карте текущее местоположение пользователя и другие пользователи, чьи местоположения я получаю из сообщения ajax.Получить текущее местоположение пользователя и других пользователей на одной карте с помощью HTML, AJAX и JS
Другими словами, я пытаюсь совместить это https://developers.google.com/maps/documentation/javascript/examples/map-geolocation
с этим http://en.marnoto.com/2013/12/mapa-com-varios-marcadores-google-maps.html
или даже более простой версии Google Maps JS API v3 - Simple Multiple Marker Example
, но я не знаю, как реализовать свои данные, Я получаю от ajax. Чтобы получить информацию от ajax, я должен передать широту и долготу, чтобы получить пользователей, которые находятся в радиусе 1 км и которые вошли в систему за последние 5 минут. Я написал запрос, и мой api верен, я проверил эту часть, но я не знаю, как объединить два кода, чтобы получить одну карту с текущим местоположением пользователя и другими пользователями.
это мой файл index.html
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Geolocation</title>
<script src="location.js"></script>
</head><body>
<div id="map"></div>
<p id="geolocation"></p>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 45.38361, lng: 20.38194},
zoomControl:true,
zoom: 15
});
var infoWindow = new google.maps.InfoWindow({map: map});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('You are here.');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap">
</script>
</body>
и это мой location.js файл
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
function onSuccess(position) {
var element = document.getElementById('geolocation');
console.log(position.coords.latitude);
console.log(position.coords.longitude);
//here is where I write in the db user's current location
$.post("url/location", {username: localStorage.getItem("username"), latitude: position.coords.latitude, longitude: position.coords.longitude});
//here is where I get other users locations based on user's current one and in the radius of 1km
$.post("url/getUsers", {latitude: position.coords.latitude, longitude: position.coords.longitude})
.done(function (data) {
$(data).each(function (index, value) {
//here I am writing in the console the data that I receive back from the ajax call, and I presume that I should make my markers here
console.log(value.username + ' ' + value.latitude + ' ' + value.longitude);
});
});
}
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
ли у вас широту и долготу в БД ?? – user1544541
Да, я получаю широту и долготу текущего местоположения пользователя, а с post и ajax я помещаю его в БД. Следующим шагом было сделать еще один api, чтобы разместить такую же широту и долготу, чтобы получить местоположение другого пользователя в радиусе 1 км и за последние 5 минут, чтобы местоположение было актуальным. Я написал результат в console.log, и он работает, я получаю правильные данные назад. У меня просто возникают проблемы с тем, как разместить эти маркеры на карте. – Sandy
Хорошо, я проведу вас через несколько минут. Я его реализовал. Благодарю. – user1544541