2017-02-17 22 views
-1

Я пытаюсь показать на одной карте текущее местоположение пользователя и другие пользователи, чьи местоположения я получаю из сообщения 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'); 
 
}

+0

ли у вас широту и долготу в БД ?? – user1544541

+0

Да, я получаю широту и долготу текущего местоположения пользователя, а с post и ajax я помещаю его в БД. Следующим шагом было сделать еще один api, чтобы разместить такую ​​же широту и долготу, чтобы получить местоположение другого пользователя в радиусе 1 км и за последние 5 минут, чтобы местоположение было актуальным. Я написал результат в console.log, и он работает, я получаю правильные данные назад. У меня просто возникают проблемы с тем, как разместить эти маркеры на карте. – Sandy

+0

Хорошо, я проведу вас через несколько минут. Я его реализовал. Благодарю. – user1544541

ответ

1
for (i = 0; i < jsonArray.locations.length; i++) 
    { 
    var counter = jsonArray.locations[i];   
    var infowindow = new google.maps.InfoWindow(); 

    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(counter['lat'], counter['lon']), 
    map: map, 
    icon:'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+i+'|FF0000|000000' 
    }); 

    }