Google Map API를 사용하여 사용자 지정 지연/장시간 위치 표시

Google Map API를 사용하여 사용자 지정 지연/장시간 위치 표시

오늘, 나는 나의 오늘 업무(지라)에서 과제를 할당받았다.

즉, 데이터베이스로부터 이용 가능한 상점 위치와 가까운 탑승자 위치를 조회하여 지도에 해당 정보를 표시해야 합니다.

이를 위해 구글 지도 API를 이용했습니다. 호스트 응용 프로그램이 Laravel로 사용되며, 예, 이 경우 자바스크립트가 반드시 필요합니다.

내 모든 과정이 지루하고 길기 때문에 나는 너에게 말하지 않을 것이다.

따라서, 저는 여러분이 따를 수 있는 기본적인 단계만 말씀드리겠습니다.

첫 번째 단계,

구글 개발자 콘솔로 가서 api 키를 얻으세요.

https://developers.google.com/maps/documentation/javascript/get-api-key

https://developers.google.com/maps/documentation/javascript/get-api-key 블레이드 템플릿에 div 태그를 추가합니다.

지도 데이터는 해당 ID(지도)를 사용하여 해당 문서에 렌더링됩니다.

Google 지도 스크립트 태그를 가져옵니다. 1단계의 api 키가 있죠? 해당 api 키를 {your_api_key} 위치에 추가하십시오. myMap 은 나중에 추가할 콜백 함수 이름입니다.

myMap 기능을 추가합니다. 이 경우 지도에 위도/장도 위치 쌍을 가운데와 마커로 추가합니다. 지도에 표시하기 위해 div에서 document.getElementById( map )를 사용하여 지도 데이터를 렌더링합니다. 구글맵스에는 멋진 기능이 많기 때문에 테스트하고 싶다면 더 많은 조사를 할 수 있습니다.

function myMap() { var center = {lat: 16.81265991142744, lng: 96.12810673385788}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: center }); let marker =new google.maps.Marker({ position: {lat: 16.81265991142744, lng: 96.12810673385788}, map: map, icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png' }); }

예, 여러 위치와 마커 등으로 테스트할 수 있습니다. 그거 재미있겠는데요.

시간 내 주셔서 고마워요.

다른 블로그에서 뵙겠습니다.

from http://gong-tech.tistory.com/38 by ccl(A) rewrite - 2021-09-24 09:27:14