Показать данный город на данной карте, используя Open Street Maps - PullRequest
Новая
       68

Показать данный город на данной карте, используя Open Street Maps

1 голос
/ 07 апреля 2020

Я создаю веб-сайт, и я хотел бы иметь возможность отображать местоположение, введенное пользователем, на открытой карте улиц, например, пользователь может ввести «Лондон» в поле ввода, после чего он отображает это местоположение на карта.

Это текущий файл html, который у меня есть на данный момент: 

<!DOCTYPE html>
<html>
<head>
    <title>TESTING</title>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
    <link href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" rel="stylesheet"/>
</head>
<body onload="showLocation();">
    <input type="text" id="locInput">
    <button onclick="showLocation();">Find the location!</button>
    <div id="osm-map"></div>

    <script type="text/javascript">
        function showLocation() {
            var element = document.getElementById('osm-map');
            var location = document.getElementById('locInput').value;
            console.log(location);

            element.style = 'height:500px; width:500px;';

            var map = L.map(element);
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);

            var target = L.latLng('40.7128', '-74.00601');
            map.setView(target, 10);

            L.marker(target).addTo(map);
        }
    </script>
</body>
</html>
...