0

Хочу чтобы город и страна отображались в левом верхнем углу сайта. Но как я понимаю для этого функция geocoder.geocode использует JavaScript. Каким образом можно получить значение переменной city, country яваскрипта (geocoder.geocode) в main.html (или в main.php не знаю точно как правильно) (как я понимаю нельзя прямо написать имя переменной - city, country)? Затем вызвать echo значение_переменной_сity. Написал код главного сайта, кода geolocation и кода geocoder.

main

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Electromart</title>
    <!-- <link href="//db.onlinewebfonts.com/c/8274996f8cf973b15814827fa281e485?family=TechnojunkW00-Regular" rel="stylesheet" type="text/css"/>-->
    <link rel="stylesheet" href="css/eshop.css">
</head>
<body>
<header class="header">
    <div class="header__container"> 
        <div class="topheader">
            <div class="topheader1">
                <?php

                ?>
            </div>
        </div>  
        <div class="header__item">
            <div class="logoimage">
                <img src="images/logo3.jpg" width="100" height="75" id="idsettingsforlogo" ></img>
            </div>
        </div>
        <div class="header__item">  
            <div class="char">
                <div class="char1">
                    T
                </div>
            </div>
            <div class="char">
                <div class="char2">
                    e
                </div>
            </div>
            <div class="char">
                <div class="char3">
                    c
                </div>
            </div>
            <div class="char">
                <div class="char4">
                    h
                </div>
            </div>
            <div class="char">
                <div class="char5">
                    n
                </div>
            </div>
            <div class="char">
                <div class="char6">
                    o
                </div>
            </div>
            <div class="char">
                <div class="char7">
                    S
                </div>
            </div>
            <div class="char">
                <div class="char8">
                    t
                </div>
            </div>
            <div class="char">
                <div class="char9">
                    o
                </div>
            </div>
            <div class="char">
                <div class="char10">
                    r
                </div>
            </div>
            <div class="char">
                <div class="char11">
                    e
                </div>
            </div>
    </div>
<script type="text/javascript" src="js/geoloc.js"></script>
<script type="text/javascript" src="js/geocode.js"></script>
</header>

<footer class="footer">

</footer>
</body>
</html>

geoloc.js

// Check if the browser has support for the Geolocation API
if (!navigator.geolocation) {
  echo 'No support browser';    
} else {

  window.onload=locinit;
  function locinit(){

    navigator.geolocation.getCurrentPosition(function(position) {

      // Get the coordinates of the current possition.
      var lat = position.coords.latitude;
      var lng = position.coords.longitude;

      $('.latitude').text(lat.toFixed(3));
      $('.longitude').text(lng.toFixed(3));
      $('.coordinates').addClass('visible');

      // Create a new map and place a marker at the device location.
      var map = new GMaps({
        el: '#map',
        lat: lat,
        lng: lng
      });

      map.addMarker({
        lat: lat,
        lng: lng
      });

    });

  });

  }
}

geocode.js

 var geocoder = new google.maps.Geocoder();
    geocoder.geocode({address: lat + ',' + lng}, function (results, status) {
        if (status !== google.maps.GeocoderStatus.OK || !results[0]) {
            return;
        }
        var result = results[0];

        var city, region, country;

        for (var i = 0; i < result.address_components.length; i++) {
            if (result.address_components[i].types[0] === "locality") {
                city = result.address_components[i];
            }
            if (result.address_components[i].types[0] === "administrative_area_level_1") {
                region = result.address_components[i];
            }
            if (result.address_components[i].types[0] === "country") {
                country = result.address_components[i];
            }
        }

        // alert(city.long_name + ", " + region.long_name + ", " + country.short_name)

        console.log(results);
    });

Подскажите как можно обратиться к переменным city и country файла geocode.js в файле main в блоке

        <div class="topheader">
            <div class="topheader1">
                <?php

                ?>
            </div>

Не уверен насколько нужно использовать теги , если можно обойтись без них, то напишите об этом.

P.S. В функции geocode для вывода переменных использовалась функция alert с обращением напрямую к переменным city, country, region, а каким образом вывести эти переменные в main.html или в main.php - как к ним обратиться?

P.S.1 Очень желательно без полного использования js (весь код в js писать неподходящий вариант)

1 ответ 1

-1

Вам нужно работать строго с js. В geocode после цикла прописать:

let div = document.createElement("div");
let text = document.createElement("p");
text.innerHTML = `${city}, ${country}`
document.body.append(div);
div.append(text);
3
  • полностью работать с js не получится 24 фев 2020 в 13:15
  • почему? вы вкладываете в основной файл .html скрипт geocode. geocode же генерирует код в вашем main html.
    – letUser
    24 фев 2020 в 13:30
  • невозможно, чтобы вся разметка строилась на js (с помощью DOM) Вообщем передо мной было поставлено так задание, поэтому если есть еще способы, то напишите 24 фев 2020 в 14:38

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.