Отображение полного адреса из текущего местоположения с помощью Mapbox / JavaScipt - PullRequest
Новая
       28

Отображение полного адреса из текущего местоположения с помощью Mapbox / JavaScipt

0 голосов
/ 11 января 2020

Я пытаюсь получить свое текущее местоположение с широтой, долготой, точностью и полным адресом и отображать все данные во входном тексте. Ниже приведен код js, как я вернул данные. 

document.getElementById("myText1").value = e.latlng.lat;
document.getElementById("myText2").value = e.latlng.lng;
document.getElementById("myText3").value = e.accuracy;
document.getElementById("myText4").value = e.address;

Однако, только e.address не отображается во входном тексте, и в нем указано «Undefined». Прикрепленное изображение пользовательского интерфейса с вводимым текстом. введите описание изображения здесь

Здесь полный JS код с использованием API Mapbox. 

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Geolocation</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width: 0px; height: 0px }
</style>
</head>
<body>

<div id='map'></div>
Lat: <input type="text" id="myText1" ><br>
Lng: <input type="text" id="myText2" ><br>
Accuracy: <input type="text" id="myText3" ><br>
Full Address: <input type="text" id="myText4" >


<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiYWppc2FiYmFzIiwiYSI6ImNrNTlobnJ2NDBvNTUzbW11dDN5a2pkYXMifQ.OK6oShDZn-I5oJDb21EX4g';
var map = L.mapbox.map('map', 'mapbox.streets');

var myLayer = L.mapbox.featureLayer().addTo(map);


if (!navigator.geolocation) {
    geolocate.innerHTML = 'Geolocation is not available';
} else {
      map.locate();

}

map.on('locationfound', function(e) {
    map.fitBounds(e.bounds);

    document.getElementById("myText1").value = e.latlng.lat;
    document.getElementById("myText2").value = e.latlng.lng;
    document.getElementById("myText3").value = e.accuracy;
    document.getElementById("myText4").value = e.address;


    myLayer.setGeoJSON({
        type: 'Feature',
        geometry: {
            type: 'Address',
            coordinates: [e.latlng.lng, e.latlng.lat],
        },
        properties: {
            'title': 'You are here!',
            'marker-color': '#ff8888',
            'marker-symbol': 'star',

        }
    });
    geolocate.parentNode.removeChild(geolocate);
});


map.on('locationerror', function() {
    geolocate.innerHTML = 'Position could not be found';
});
</script>
</body>
</html>
...