Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Umieszczanie wyniku funkcji w linku w HTML

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

Umieszczanie wyniku funkcji w linku w HTML

Post 15.04.2017, 21:50:27

Witam!
Piszę stronę, w której ma się wyświetlać mapa Google z dojazdem od mojej lokalizacji do określonego miejsca. Nic z tego jeszcze w szkole nie miałem, bo to zadanie dodatkowe, dlatego polegam tylko na internecie i poradnikach (jeśli chodzi o temat lokalizacji, bo JS trochę ogarniam :D). Jestem na etapie, kiedy na stronie wyświetla mi się Mapa z dojazdem od A do B. Problem w tym, że A i B wpisane są w kodzie przeze mnie. Teraz chcę zastąpić to A moją lokalizacją. Znalazłem jakiś kod, w którym wykrywa moją lokalizację (orientacyjnie) i podaje koordynaty. Próbowałem różne API, ale nie ogarniam. Założyłem tylko API na Google Maps i działa. Problem polega na tym, że chcę, aby te koordynaty z funkcji w skrypcie pojawiły się w linku, który generuje mapę. Może pokażę kod..

Kod: Zaznacz cały
<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;

}
</script>

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/directions?key=AIzaSyBBhTyPByzfj6iv7TCK8asDLNx0ysoj8Sg
  &origin=Latitude,Longitude
  &destination=Zespół+Szkół+nr+1+w+Piekarach+Śląskich
  " allowfullscreen>
</iframe>


Jak widać, skrypt wyświetla koordynaty, a ja chcę je teraz umieścić w miejscu "&origin=...". Nie wiem jak to zrobić, przerobić :( Pomocy.
Lumash
Posty: 5
Dołączył(a): 15.04.2017

Re: Umieszczanie wyniku funkcji w linku w HTML

Post 17.04.2017, 03:16:21

Kod: Zaznacz cały
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
  document.getElementById('myIframe').src = 'https://www.google.com/maps/embed/v1/directions?key=AIzaSyBBhTyPByzfj6iv7TCK8asDLNx0ysoj8Sg&origin='+position.coords.latitude+','+position.coords.longitude+'&destination=Zespół+Szkół+nr+1+w+Piekarach+Śląskich';
}


https://codepen.io/mackie_pl/pen/PmqQBv
Mackie
Posty: 18
Dołączył(a): 17.04.2017

Re: Umieszczanie wyniku funkcji w linku w HTML

Post 18.04.2017, 17:26:57

Dzięki wielkie, poradziłem sobie już w inny sposób, ale też działa :) Miło, że pomogłeś! Dzięki jeszcze raz!
Kod: Zaznacz cały
<script>
      function getLocation()
      {
         if (navigator.geolocation)
         {
            navigator.geolocation.getCurrentPosition(showPosition, showError);
         }
         else
         {
            showError(error)
         }
      }

      function showPosition(position)
      {
         var latlon = position.coords.latitude + "," + position.coords.longitude;

         var link = "https://www.google.com/maps/embed/v1/directions?key=AIzaSyBBhTyPByzfj6iv7TCK8asDLNx0ysoj8Sg&origin="
         +latlon+"&destination=Zespół+Szkół+nr+1+w+Piekarach+Śląskich";
         
         document.getElementById("mapa").innerHTML = "<iframe width='99%' height='750' frameborder='0' style='border:0' src='"+link+"'>";
      }

      function showError(error)
      {
      
         var x = document.getElementById("blad");
         switch(error.code)
         {
            case error.PERMISSION_DENIED:
               x.innerHTML = "Użytkownik odmówił dostępu do lokalizacji."
               break;
            case error.POSITION_UNAVAILABLE:
               x.innerHTML = "Informacje dotyczące lokalizacji są niedostępne. Przepraszamy za problemy!"
               break;
            case error.TIMEOUT:
               x.innerHTML = "Upłynął czas rządania."
               break;
            case error.UNKNOWN_ERROR:
               x.innerHTML = "Ups! Wystąpił nieznany błąd."
               break;
         }
      }
      </script>
<div id="blad">
</div>

<div id="mapa">
   
   </iframe>
</div>
Lumash
Posty: 5
Dołączył(a): 15.04.2017


Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Ahrefs [Bot] i 5 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 50438 zarejestrowanych użytkowników.
Najnowszy użytkownik: stypek3865


Nasi użytkownicy napisali:

  • 935650 wiadomości
  • w 246576 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)