주소를 Google Maps Local Context (Geocoding + Local Context Maps)의 좌표로 변환

Nov 14 2020

Google지도 로컬 컨텍스트를 내 웹 사이트에 연결하려고하는데 주소 문자열 (1234 Main St, City, State, USA)을 사용하여 내지도의 중앙에 마커를 표시하려고합니다.

다음은 사이트에 간단한지도를 표시하는 코드입니다.하지만 좌표 대신 주소를 가져 오는 데 도움이 필요합니다.

지오 코더를 사용해야하지만 Google지도 로컬 컨텍스트지도와 연결하는 데 도움이 필요합니다.

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=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=localContext&v=beta" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

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

</html>

답변

1 geocodezip Nov 15 2020 at 03:47

Google Maps Javascript API v3에서 지오 코더를 사용하는 방법 은 간단한 지오 코더 예제 를 참조하세요 . 아래 코드는 지오 코더를 사용하여 "1600 Amphitheatre Parkway, Mountain View, CA"의 좌표를 반환합니다.

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=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=localContext&v=beta" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

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

</html>

Irfanwani Nov 15 2020 at 03:22

이미 주소가 있고 지오 코딩 API를 사용하여 주소를 좌표로 변환하면됩니다. 스크립트 내에서 페이지를 다시로드하여 지오 코딩 API CDN을 가져와야합니다. 이를 위해 axios를 사용할 것입니다. 다음은 코드입니다. HTML 페이지 헤드에이 두 줄을 추가합니다.