Javascript obecně + Google maps API

C++, C#, Visual Basic, Delphi, Perl a ostatní

Moderátor: Moderátoři Živě.cz

Odeslat odpověď

Odeslat příspěvekod PravyBabu 5. 3. 2017 21:46

Zdravím, potřeboval bych pomoct s implementováním Haversine formula do mého kódu. V kódu jde o to, aby mi z aktuální pozice byla nalezena cesta k nejbližšímu markeru a cesta by byla zobrazena. A jde mi o to, jak zjistit ten nejbližší marker (nejbližší cestu) k aktuální poloze... Chtěl bych použít Haversine formula viz http://bit.ly/2mkk2b9. Nebo máte nějaký lepší, elegantnější nápad, jak to vyřešit? Budu rád, za jakoukoli pomoc, určitě je to jednoduché, ale v javascriptu zatím plavu.

Můj kód zde: https://jsfiddle.net/LL90rka9/
PravyBabu
Kolemjdoucí

Odeslat příspěvekod totter 5. 4. 2017 14:09

Ahoj

Nevím, jestli je moje odpověď správná a správně jsem problém chápal (nejsem programátor).

Něco podobného jsem dělal. Problémem pro mě bylo, že Google API musíš volat asynchronně, protože JavaScript nečeká na výsledek z API a probíhá dál (nejde udělat žádné počkej na odpověď z googlu a pak probíhej dál). Tudíž veškeré výsledky, které z API dostaneš v rámci JavaScritu zůstanou pouze lokální a nemůžeš s nima pracovat mimo volání Google MAP API. Tím pádem veškerý kód musel být vnořen do volání Google MAP API. Řeší se to pomocí fce Callback.

V důsledku to znamená, že veškerý výsledek tvé práce zůstane pouze v okně mapy.
Tzn. Pokud programuješ program, který otevírá iexlorer objekt se zobrazením mapy, tak ti to na mapě funguje, ale zbylý kód nemá k datům přístup.

Přikládám svůj pokus. Nenašel jsem finál. Toto bylo jen na testing.
Kód: Vybrat vše
<!DOCTYPE html>
<html>
  <head>
    <title>Simple click event</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <link href="http://code.google.com//apis/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
    var betonarnylocationarray = [new google.maps.LatLng(49.955688, 14.079924),new google.maps.LatLng(49.180664, 16.626890),new google.maps.LatLng(48.741417, 16.865831),new google.maps.LatLng(48.983475, 14.518084),new google.maps.LatLng(49.092682, 15.434144),new google.maps.LatLng(50.772148, 14.234483),new google.maps.LatLng(49.910480, 18.461763),new google.maps.LatLng(50.451595, 15.822684),new google.maps.LatLng(48.844666, 17.094170),new google.maps.LatLng(50.120167, 14.615378),new google.maps.LatLng(49.763371, 16.584330),new google.maps.LatLng(50.457035, 13.432524),new google.maps.LatLng(49.583187, 18.754145),new google.maps.LatLng(49.632702, 16.718616),new google.maps.LatLng(49.441757, 15.609282),new google.maps.LatLng(50.179684, 14.402540),new google.maps.LatLng(50.045990, 15.200315),new google.maps.LatLng(49.027794, 17.470387),new google.maps.LatLng(50.778057, 15.032306),new google.maps.LatLng(50.012440, 14.469321),new google.maps.LatLng(50.086388, 14.534799),new google.maps.LatLng(48.798664, 16.626434),new google.maps.LatLng(49.669685, 17.123474),new google.maps.LatLng(49.480690, 13.594766),new google.maps.LatLng(50.158501, 13.916631),new google.maps.LatLng(50.598026, 15.117831),new google.maps.LatLng(49.203007, 16.091232),new google.maps.LatLng(49.578926, 17.215925),new google.maps.LatLng(49.826317, 18.288176),new google.maps.LatLng(49.195892, 17.534061),new google.maps.LatLng(50.193157, 15.788292),new google.maps.LatLng(49.720108, 13.463632),new google.maps.LatLng(49.768116, 13.404361),new google.maps.LatLng(50.145504, 15.145528),new google.maps.LatLng(50.167252, 12.646149),new google.maps.LatLng(50.255695, 15.833235),new google.maps.LatLng(50.057819, 14.326580),new google.maps.LatLng(49.810913, 18.548967),new google.maps.LatLng(49.790867, 18.398870),new google.maps.LatLng(49.972706, 16.996939),new google.maps.LatLng(50.650047, 13.806108),new google.maps.LatLng(49.211094, 15.911880),new google.maps.LatLng(49.022011, 17.629326),new google.maps.LatLng(50.664505, 14.072253),new google.maps.LatLng(49.144653, 17.991669),new google.maps.LatLng(49.489101, 17.954388),new google.maps.LatLng(49.313038, 17.969049),new google.maps.LatLng(48.854794, 16.078444),new google.maps.LatLng(50.413967, 14.931174),new google.maps.LatLng(49.267132, 17.732632),new google.maps.LatLng(50.049740, 15.738162),new google.maps.LatLng(50.576923, 13.786519),new google.maps.LatLng(50.531933, 14.147301)];
    var betonarnynamearray = ['CEMEX - betonárna Beroun','CEMEX - betonárna Brno','CEMEX - betonárna Bøeclav','CEMEX - betonárna Èeské Budìjovice','CEMEX - betonárna Daèice','CEMEX - betonárna Dìèín','CEMEX - betonárna Dìtmarovice','CEMEX - betonárna Dvùr Králové','CEMEX - betonárna Hodonín','CEMEX - betonárna Horní Poèernice','CEMEX - betonárna Høebeè','CEMEX - betonárna Chomutov','CEMEX - betonárna Jablunkov','CEMEX - betonárna Jevíèko','CEMEX - betonárna Jihlava','CEMEX - betonárna Klecany','CEMEX - betonárna Kolín','CEMEX - betonárna Kunovice','CEMEX - betonárna Liberec','CEMEX - betonárna Libuš','CEMEX - betonárna Malešice','CEMEX - betonárna Mikulov','CEMEX - betonárna Náklo','CEMEX - betonárna Nepomuk','CEMEX - betonárna Nové Strašecí','CEMEX -- betonárna Ohrazenice','CEMEX - betonárna Okarec','CEMEX - betonárna Olomouc','CEMEX - betonárna Ostrava-centrum','CEMEX - betonárna Otrokovice','CEMEX - betonárna Plaèice','CEMEX - betonárna Plzeò-Letkov','CEMEX - betonárna Plzeò-Prior','CEMEX - betonárna Podìbrady','CEMEX - betonárna Sokolov','CEMEX - betonárna Správèice u H.Králové','CEMEX - betonárna Stodùlky','CEMEX - betonárna Stonava','CEMEX - betonárna Šenov','CEMEX - betonárna Šumperk-Vikýøovice','CEMEX - betonárna Teplice','CEMEX - betonárna Tøebíè','CEMEX - betonárna Uherský Brod','CEMEX - betonárna Ústí nad Labem','CEMEX - betonárna Valašské Klobouky','CEMEX - betonárna Valašské Meziøíèí','CEMEX - betonárna Vsetín','CEMEX- betonárna Znojmo','CEMEX - betonárna Mladá Boleslav','CEMEX - betonárna Zlín','CEMEX - betonárna Pardubice','CEMEX - betonárna Ledvice','CEMEX - betonárna Litomìøice'];                 
             

function initialize() {
  var mapOptions = {
    zoom: 7,
    center: new google.maps.LatLng(49.9, 15.2),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var pozice;
  var marker = [];
  for (pozice in betonarnylocationarray) {
  marker[pozice] = new google.maps.Marker({
    position: betonarnylocationarray[pozice],
    map: map,
    title: betonarnynamearray[pozice]
  });
  }

var pi = Math.PI;
var R = 6371; //equatorial radius
var distances = [];
var closest = -1;
var closer = -1;
var close = -1;
var lat1 = 49.9;
var lon1 = 15.2;

for( i=0;i<marker.length; i++ ) {

    var lat2 = marker[i].position.lat();
    var lon2 = marker[i].position.lng();

    var chLat = lat2-lat1;
    var chLon = lon2-lon1;


    var dLat = chLat*(pi/180);
    var dLon = chLon*(pi/180);

    var rLat1 = lat1*(pi/180);
    var rLat2 = lat2*(pi/180);

    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
            Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(rLat1) * Math.cos(rLat2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    var d = R * c;


    distances[i] = d;
    if ( closest == -1 || d < distances[closest] ) {
        closest = i;
    }
     if ( closer == -1 || d < distances[closer] && d > distances[closest]) {
        closer = i;
    }
     if ( close == -1 || d < distances[close] && d > distances[closest] && d > distances[closer]) {
        close = i;
    }
  }
 
  var directionsService = new google.maps.DirectionsService();
  var gogo = [closest, closer, close];
 
for( i=0;i<3; i++ ) {

// var start = document.getElementById("start").value;
// var end = document.getElementById("end").value;
 
    var request = {
    origin: new google.maps.LatLng(49.9, 15.2),
    destination: betonarnylocationarray[gogo[i]],
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };

var directionsDisplay = new google.maps.DirectionsRenderer();

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
       var distance = response.routes[0].legs[0].distance.value/1000;
       alert(distance);
    }
  });
}


  google.maps.event.addListener(map, 'center_changed', function() {
    // 3 seconds after the center of the map has changed, pan back to the
    // marker.
    window.setTimeout(function() {
      map.panTo(marker.getPosition());
    }, 3000);
  });

  google.maps.event.addListener(marker, 'click', function() {
    map.setZoom(8);
    map.setCenter(marker.getPosition());
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>


-- 5. 4. 2017 15:20 --

Haversine formula je pouze ke zjišťování nejbližší 'přímé' vzdálenosti mezi GPS body (určuje vzdálenost na promítnutou na geoid).
Používá se, aby jsi nemusel testovat všechny markery na jízdní vzdálenost pomocí funkce drivedistance. Pomocí haversine formule si vytipuješ 3 nejbližší markery a na ty pak použiješ drivedistance funkci a máš velkou pravděpodobnost, že jsi našel nejbližší.

PS: Ale jak už jsem psal. Zbytek kódu mimo volání google map API o tom nebude vědět. Tzn. Výsledek je jen a pouze zobrazen na mapě.
Pokud s tím potřebuješ dále pracovat, tak si data musíš zjistit mimo google map API. Já jsem to dělal myslím pomocí použití iexporer objektu pomocí google distance matrix.
Každopádně pokud tvoje snaha sahá až třeba k izolinieám, tak na API google rovnou zapomeň. Musíš si udělat vlastni GEO server.
totter
Kolemjdoucí
Odeslat odpověď
Zpět na Programování

Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků

Podmínky pro užívání služby informační společnosti | Informace o zpracování osobních údajů | Cookies
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group