Google지도 : 지오 코더를 통해 주소를 좌표로 변환 한 후 길 찾기

Nov 15 2020

@eocodezip 의 답변 덕분에 Google Maps에서 Local Context 를 사용할 수 있지만 팝업 된 근처 위치에서 길 찾기를 활성화하는 데 문제가 있습니다.

제가 사용하는 코드는 다음과 같습니다. "directionsOptions : {origin : center}"가 너무 늦게 실행되는 것처럼 보이지만 나중에 'center'가 정의되지 않았기 때문에 위로 이동할 수 없습니다. 이전에 setCenter에 대한 방법이 있습니까? 적어도 그게 문제라고 생각합니다.

let map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: ["restaurant", "tourist_attraction",
"bar", "cafe", "book_store", "convenience_store", "hospital"],
    maxPlaceCount: 24,
  });
  
  map = localContextMapView.map;
  let geocoder = new google.maps.Geocoder();
  geocoder.geocode({ address: "25325 Main St, Newhall, CA, USA" }, (results, status) => {
    if (status === "OK") {
      const center = results[0].geometry.location;
      map.setCenter(center);
  new google.maps.Marker({ position: center, map: map});
  map.setOptions({
    directionsOptions: { origin: center },
    center: center,
    zoom: 14,
  });
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

#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 MrUpsidown Nov 15 2020 at 17:28

google.maps.MapDirectionsOptions재산 이 없습니다 . 문서를 참조하십시오 . 다음을 설정해야합니다 localContextMapView.

localContextMapView.directionsOptions = {
  origin: center
};

즉, 제공 한 코드로 지오 코더가 실패하면지도가 전혀 표시되지 않습니다. 의도 된 행동입니까?

let map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: ["restaurant", "tourist_attraction",
      "bar", "cafe", "book_store", "convenience_store", "hospital"
    ],
    maxPlaceCount: 24,
  });

  map = localContextMapView.map;
  let geocoder = new google.maps.Geocoder();
  
  geocoder.geocode({
    address: "25325 Main St, Newhall, CA, USA"
  }, (results, status) => {
    if (status === "OK") {
    
      const center = results[0].geometry.location;
      
      map.setOptions({
        center: center,
        zoom: 14
      });
      
      new google.maps.Marker({
        position: center,
        map: map
      });

      localContextMapView.directionsOptions = {
        origin: center
      };
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

#map {
  height: 400px;
}


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

html,
body {
  height: 400px;
  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>

대신 기본 중심 및 확대 / 축소를 설정하고 지오 코더가 성공할 때 조정하면 ( locationRestriction로컬 컨텍스트 맵에서 새로 설정과 함께 ) 항상지도가 표시됩니다.