Интеграция API геоданных с API Google Адресов

Question

Итак, я пытаюсь интегрировать два рабочих скрипта в один.

Я хотел бы посмотреть все спортивные залы в радиусе 10 км от моего текущего местоположения. Я могу сделать это со статическим местоположением, но с проблемами интеграции геоданных. Это то, что я придумал, любые предложения были бы чрезвычайно оценены. Благодаря

>

<div id="map"></div> 
    <script> 
var map; 
var infowindow; 
var pos; 

function initMap() {  

    if (navigator.geolocation) {//GEO LOCATION, FINDS USERS LOCATION 
    navigator.geolocation.getCurrentPosition(function(position) { 
    pos = { 
     lat: position.coords.latitude, 
     lng: position.coords.longitude 
     } 
    infoWindow.setPosition(pos); 
     infoWindow.setContent('Location found.'); 
     map.setCenter(pos); 
    } 
              )}; 


    var myLocation = pos; //Sets variable to geo location long and lat co-ordinates. 

    map = new google.maps.Map(document.getElementById('map'), { 
    center: myLocation, 
    zoom: 13 
    }); 

    infowindow = new google.maps.InfoWindow({map: map}); 


    var service = new google.maps.places.PlacesService(map); 
    service.nearbySearch({ 
    location: myLocation, //Uses geolocation to find the following 
    radius: 10000, 
    types: ['gym'] 
    }, callback); 
} 

function callback(results, status) { 
    if (status === google.maps.places.PlacesServiceStatus.OK) { 
    for (var i = 0; i < results.length; i++) { 
     createMarker(results[i]); 
    } 
    } 
} 

function createMarker(place) { 
    var placeLoc = place.geometry.location; 
    var marker = new google.maps.Marker({ 
    map: map, 
    position: place.geometry.location 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(place.name); 
    infowindow.open(map, this); 
    }); 
} 

     }; 


    //////////////////////////////// 
    </script> 

Answer 1

Есть целый ряд проблем с этим кодом. Вот скрипка, где все они решены и работа:

https://jsfiddle.net/jimedelstein/bfdhjsyy/

А вот код:

<div id="map" style="width:500px; height:500px"></div> 
<script> 
var map; 
var infowindow; 
var pos; 

function initMap() { 

    if (navigator.geolocation) { //GEO LOCATION, FINDS USERS LOCATION 
    navigator.geolocation.getCurrentPosition(function(position) { 

     pos = { 
     lat: position.coords.latitude, 
     lng: position.coords.longitude 
     } 
     map = new google.maps.Map(document.getElementById('map'), { 
     center: myLocation, 
     zoom: 13 
     }); 
     infoWindow = new google.maps.InfoWindow({ 
     map: map 
     }); 
     infoWindow.setPosition(pos); 
     infoWindow.setContent('Location found.'); 
     map.setCenter(pos); 
     var myLocation = pos; //Sets variable to geo location long and lat co-ordinates. 

     var service = new google.maps.places.PlacesService(map); 
     service.nearbySearch({ 
     location: myLocation, //Uses geolocation to find the following 
     radius: 10000, 
     types: ['gym'] 
     }, callback); 
    }) 
    }; 



} 

function callback(results, status) { 
    if (status === google.maps.places.PlacesServiceStatus.OK) { 
    for (var i = 0; i < results.length; i++) { 
     createMarker(results[i]); 
    } 
    } 
} 

function createMarker(place) { 
    var placeLoc = place.geometry.location; 
    var marker = new google.maps.Marker({ 
    map: map, 
    position: place.geometry.location 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(place.name); 
    infowindow.open(map, this); 
    }); 
} 

initMap(); 
</scrip> 

Вы заметите, что порядок вещей был главным вопросом. Вам нужно подождать, пока вы не ответите на геолокацию, чтобы убедиться, что у вас есть позиция. И вы должны создать свою карту и информационное окно, прежде чем использовать их. Был также тип в строке infoWindow = new google.maps ..., W не был заглавными.

Answer 2

Вы можете проверить, если геолокация допускается в prowser как этот

if (navigator.geolocation) { 
       navigator.geolocation.getCurrentPosition(setUsersLocation); 
       showClosestGyms(); 
     } 

в setuserslocation вы можете установить маркер Ф.О. расположения пользователей

var userlocation; 
    function setUsersLocation(position) { 
     center = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); 
     userlocation = new google.maps.Marker({ 
      position: center, 
      map: map 

     }); 
     map.setCenter(center); 
     showClosestGyms(); 

    } 

, то вы можете показать самые близкие Тренажерные залы сортировки массива gymlocation расстояния для пользователей (предположим, что у вас есть «спортивные площадки», которые являются массивом всех спортивных залов):

function showClosestGyms(){ 

gymlocations.sort(function (x, y) { 
    var xdistance = getDistanceBetweenMarkers(x.latitude, x.longtitude, clickmarker.getPosition().lat(), userlocation.getPosition().lng()); 
    var ydistance = getDistanceBetweenMarkers(y.latitude, y.longtitude, clickmarker.getPosition().lat(), userlocation.getPosition().lng()); 
    if (ydistance+""=="NaN" || xdistance < ydistance) { 
     return -1; 
    } 
    else 
     return 1; 
}); 

расстояние между тренажерным залом и местоположением пользователя является простая математика:

function getDistanceBetweenMarkers(lat1,long1, lat2,long2){ 

      var R = 6378137; // Earth’s mean radius in meter 
      var dLat = rad(lat2 - lat1); 
      var dLong = rad(long2 - long1); 
      var a = Math.sin(dLat/2) * Math.sin(dLat/2) + 
       Math.cos(rad(lat1)) * Math.cos(rad(lat2)) * 
       Math.sin(dLong/2) * Math.sin(dLong/2); 
      var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); 
      var d = R * c; 
      return d; // returns the distance in meter 

    } 

чем просто показать первые близкие gymlocations после сортировки:

for(var i=0;i<=10;i++){ 
var gymToShow = vm.gymlocations[i]; 
//...show gym... 
//.... 
} 

надеюсь, что это помогает.