Блог

Главная - Вопросы по программированию - Преобразование адреса в координаты для локального контекста Google Maps (геокодирование карты локального контекста)

Преобразование адреса в координаты для локального контекста Google Maps (геокодирование карты локального контекста)

#google-maps #google-geocoder

#google-карты #google-геокодер

Вопрос:

Я пытаюсь подключить локальный контекст Google Maps к своему веб-сайту, и я хочу использовать строку адреса (1234 Main St, город, штат, США) для центрирования и отображения маркера на моей карте.

Вот код, который у меня есть, который отображает простую карту на сайте, но мне нужна помощь, чтобы заставить адрес работать вместо координат.

Я должен использовать геокодер, но мне нужна помощь, чтобы связать его с локальной контекстной картой Google Maps.

 let map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: ["restaurant", "tourist_attraction"],
    maxPlaceCount: 12,
  });
  const center = { lat: 37.4219998, lng: -122.0840572 };
  map = localContextMapView.map;
  new google.maps.Marker({ position: center, map: map });
  map.setOptions({
    center: center,
    zoom: 14,
  });
}

https://jsfiddle.net/cegytdj6/

фрагмент кода:*

 let map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: ["restaurant", "tourist_attraction"],
    maxPlaceCount: 12,
  });
  const center = {
    lat: 37.4219998,
    lng: -122.0840572
  };
  map = localContextMapView.map;
  new google.maps.Marker({
    position: center,
    map: map
  });
  map.setOptions({
    center: center,
    zoom: 14,
  });
}  
 /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}  
 <!DOCTYPE html>
<html>

<head>
  <title>Local Context Basic</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qkamp;callback=initMapamp;libraries=localContextamp;v=beta" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
</body>

</html>

Ответ №1:

Смотрите пример простого геокодера, чтобы узнать, как использовать геокодер в Google Maps Javascript API v3. Приведенный ниже код будет использовать геокодер для возврата координат для «1600 Amphitheatre Parkway, Маунтин-Вью, Калифорния».

 let geocoder = new google.maps.Geocoder();
  geocoder.geocode({ address: "1600 Amphitheatre Parkway, Mountain View, CA" }, (results, status) => {
    if (status === "OK") {
      const center = results[0].geometry.location;
      map.setCenter(center);
  new google.maps.Marker({ position: center, map: map });
  map.setOptions({
    center: center,
    zoom: 14,
  });

включение этого в существующий код:

 let map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: ["restaurant", "tourist_attraction"],
    maxPlaceCount: 12,
  });
  map = localContextMapView.map;
  let geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    address: "1600 Amphitheatre Parkway, Mountain View, CA"
  }, (results, status) => {
    if (status === "OK") {
      const center = results[0].geometry.location;
      map.setCenter(center);
      new google.maps.Marker({
        position: center,
        map: map
      });
      map.setOptions({
        center: center,
        zoom: 14,
      });
    } else {
      alert("Geocode was not successful for the following reason: "   status);
    }
  });
}

обновлена скрипка

фрагмент кода:

 let map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: ["restaurant", "tourist_attraction"],
    maxPlaceCount: 12,
  });
  map = localContextMapView.map;
  let geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    address: "1600 Amphitheatre Parkway, Mountain View, CA"
  }, (results, status) => {
    if (status === "OK") {
      const center = results[0].geometry.location;
      map.setCenter(center);
      new google.maps.Marker({
        position: center,
        map: map
      });
      map.setOptions({
        center: center,
        zoom: 14,
      });
    } else {
      alert("Geocode was not successful for the following reason: "   status);
    }
  });
}  
 /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}  
 <!DOCTYPE html>
<html>

<head>
  <title>Local Context Basic</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qkamp;callback=initMapamp;libraries=localContextamp;v=beta" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
</body>

</html>

Ответ №2:

Похоже, у вас уже есть адрес, и вам просто нужно использовать API геокодирования для преобразования адреса в координаты. Внутри вашего скрипта вам нужно получить CDN API геокодирования с перезагрузкой страницы. Для этого я буду использовать axios. Вот код; Добавьте эти две строки в начало вашей HTML-страницы.

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

Теперь вы можете сделать AJAX-запрос с помощью axios.
Внутри вашего скрипта;

 axios.get(`https://maps.googleapis.com/maps/api/geocode/json?address=Your_addressamp;key=YOUR_API_KEY`)
     .then(response => {
       var lt = response.geometry.location.lat;
       var ln = response.geometry.location.lng;
       map.setCenter({lat: lt, lng:ln});
       marker.setCenter({lat: lt, lng: ln});
      })
      .catch(error => {
      console.log(error) //or whatever you want
      })

Комментарии:

1. Спасибо за ваш комментарий, Ирфан. У меня возникли проблемы с этим, но в другом сообщении было рекомендовано другое решение, которое сработало. Еще раз спасибо, мой друг.

2. Спасибо! Но вы все равно можете использовать axios где угодно, чтобы сделать AJAX-запрос без написания необработанного кода. Оставьте положительный отзыв, если это помогло. Спасибо!

3. Вам это абсолютно не нужно. Геокодирование — это служба, которая является частью JS API, и поэтому нет необходимости вызывать веб-службу (и использовать для этого дополнительные библиотеки …).