WordPress 플러그인 및 TomTom - 섹션 5

우리는 이미 매우 긴 길을 걸었다.0부터 시작해서 우리는 상점 위치추적기 워드프레스 플러그인을 구축했다. 이 플러그인은 데이터베이스 테이블을 만들었고 관리자가 TomTom 맵을 사용하여 상점 위치를 데이터베이스에 추가할 수 있도록 했다.이외에도 워드프레스 사이트의 사용자에게 지도와 상점 위치 목록을 쉽게 표시할 수 있도록 워드프레스 단축코드를 추가했습니다.
이제 플러그인에 마지막 점을 추가할 때가 되었다. 스마트 루트는 사이트 사용자가 운전 방향을 생성하고 현재 위치에서 선택한 상점 위치로 안내하는 데 도움을 준다.그 밖에 이런 것들은 간단하고 무미건조한 운전 방향이 아니다.반대로 그들은 현재의 교통 상황을 바탕으로 하는 스마트 방향이 될 것이다.

라우팅 API 추가

우선 애플리케이션에 액세스하려면 routing API 을 추가해야 합니다.TomTomAPI 응용 프로그램을 만들 때 맵 액세스와 API 검색만 요청합니다.API를 사용해야 하지만 아직 액세스 권한이 없기 때문에 응용 프로그램을 수정해야 합니다.다행히도 이것은 쉽게 할 수 있다.
signing in to your TomTom Developer account부터.로그인하면 계정 대시보드로 이동합니다.

이 시리즈의 첫 번째 글에서 만든 프로그램을 누르십시오.이 작업을 수행하면 응용 프로그램의 세부 정보가 표시되는 새 UI 패널이 나타납니다.편집 응용 프로그램 이름이 적힌 옵션을 볼 수 있습니다.클릭하면 다음 화면이 표시됩니다.

라우팅 API 확인란을 클릭하고 응용 프로그램 저장 버튼을 클릭합니다.이게 첫걸음이야!이제 애플리케이션에서 TomTom의 라우팅 API에 액세스할 수 있습니다.새 API 키는 필요하지 않으며 기존 키에 새 기능을 추가하기만 하면 됩니다.

시작 및 끝 결정

현재, 설정이 이미 끝났으니, 우리는 그것을 작업하게 하는 코드를 깊이 연구합시다.
사용자가 지도의 상점 위치를 눌렀을 때 나타나는 팝업 창을 먼저 수정합니다.팝업 창에 방향 링크가 추가되었습니다.

function addStoreMarkerToMap(store) { 

   var location = [store.latitude, store.longitude]; 

   var marker = tomtom.L.marker(location).addTo(map); 

   var el = jQuery("<div><b>" + store.name + "</b><br />" + store.address + "<br /></div>"); 

   var dir = jQuery("<a href='#'>Driving Directions</a>"); 

   dir.click(function(ev) { 

       directionsClickHandler(ev, store); 

   }); 

   el.append(dir); 

   marker.bindPopup(el[0]); 

   markers.push(marker); 

} 

사용자가 방향을 찾으려면 클릭 프로세서를 추가하면 스토어 목록을 숨기고 방향 패널을 표시합니다.

function directionsClickHandler(ev, store) { 

   ev.preventDefault(); 

   selectedStore = store; 

   var addressHtml = "<div>"+ store.name + "</div>" + "<div>"+ store.address + "</div>" + "<div>" + store.city + "</div>"; 

   jQuery(".ttlocator-driving-directions-destination").html(addressHtml); 

   jQuery(".ttlocator-driving-directions-page").show(); 

   jQuery(".ttlocator-user-stores-list-page").hide(); 

   jQuery(".ttlocator-step-by-step-instructions").empty(); 

   jQuery(".ttlocator-user-address").val(""); 

} 

위에서 보듯이 코드는 HTML을 설정하여 우리가 만들 상점 주소를 표시하고 사용자가 이전에 찾았던 모든 방향을 지우는 등 다른 내무 처리를 했다.
다음은 방향 패널을 봅시다.이 패널의 HTML은 PHP로 만들어져store locator user에서 찾을 수 있습니다.php:

function ttlocator_user_driving_directions_html() { 

   ?> 

   <div class="ttlocator-driving-directions-page"> 

       <div class="ttlocator-driving-directions-container"> 

           <h4>Driving Directions</h4> 

           <h5>Driving From</h5> 

           <div> 

               <input type="radio" name="ttlocator-user-driving-from" value="current" checked/> Current Location 

           </div> 

           <div> 

               <input type="radio" name="ttlocator-user-driving-from" value="enter"/> 

               Address: <input type="text" class="ttlocator-user-address" name="ttlocation-user-address" /> 

           </div> 

           <h5>Destination</h5> 

           <div class="ttlocator-driving-directions-destination"></div> 

           <div class="ttlocator-step-by-step-instructions"></div> 

           <button class="ttlocator-user-get-directions ttlocator-user-button">Get Directions</button> 

           <button class="ttlocator-user-back-to-stores ttlocator-user-button">Back to Stores</button> 

       </div> 

   </div> 

   <?php 

}

여기에는 무슨 복잡한 일이 없다.우리는 상점의 위치에 대한 정보를 표시한 후에 그들이 어디에서 출발할지 물었다.우리는 사용자가 현재 위치를 시작점으로 사용할 것인지, 주소를 시작점으로 할 것인지를 선택할 수 있도록 무선 입력을 제공했다.마지막으로, 사용자는 방향을 볼 수 있는 단추가 있습니다.
다음은 단추를 작동하게 하는 코드입니다.

jQuery(".ttlocator-user-get-directions").click(function(e) { 

  e.preventDefault(); 

   if(jQuery("input[name='ttlocator-user-driving-from']:checked").val() == "current") { 

       navigator.geolocation.getCurrentPosition(currentPosition); 

   } else { 

       lookupPosition(); 

   } 

}); 

다시 한 번 말하지만, 그리 복잡한 것은 없다.사용자가 현재 위치를 사용하려면 HTML5 위치 API를 사용하여 브라우저에 사용자의 위치를 묻습니다.호출할 때 이 API는 코드가 사용자의 위치에 접근할 수 있도록 하기 전에 사용자의 권한을 요청합니다.지리적 위치 API에서 위도와 경도를 수신하는 리셋을 제공합니다.

function currentPosition(position) { 

   var latitude = position.coords.latitude; 

   var longitude = position.coords.longitude; 

   showDirections(latitude,longitude); 

} 

그리고 showDirections를 다시 호출합니다. showDirections는 TomTom 웹 SDK에서 루트 방향을 가져와 표시합니다.이따가 쇼디렉션으로 다시 돌아갈게요.우선, 사용자가 시작 주소를 수동으로 입력하려면 무엇을 해야 하는지 봅시다.
만약 사용자가 지리적 위치를 사용하고 싶지 않다면, 그들은 우리가 제공한 텍스트 상자에 주소를 입력할 수 있다.이 경우 관리 패널에 매장을 추가할 때 주소를 찾는 것처럼 검색 API를 사용하여 주소를 찾아야 합니다.

function lookupPosition() { 

   var query = jQuery(".ttlocator-user-address").val(); 

   tomtom.fuzzySearch() 

       .key(window.tomtomSdkKey) 

       .query(query) 

       .go() 

       .then(locateCallback) 

       .catch(function(error) { 

           console.log(error); 

       }); 

} 

이것은 플러그인의 관리자에서 주소 좌표를 찾는 데 사용되는 코드와 같습니다.우리는 TomTom 모호 검색 API를 호출하여 SDK 키를 주고 사용자가 입력한 주소를 검색 문자열로 전달한 다음locateCallback이라는 리셋을 전달합니다.리셋은 우리가 패널을 관리하는 데 사용하는 리셋의 간단한 버전입니다.

function locateCallback(result) { 

   var filteredResult = result && result.filter(r => r.type === "Point Address") || []; 

   if(filteredResult.length > 0) { 

       var topResult = filteredResult[0]; 

       showDirections(topResult.position.lat, topResult.position.lon); 

   } else { 

       jQuery(".ttlocator-step-by-step-instructions").text("Address not found. Try changing the address or adding more information, such as country and zip/postal code.") 

   } 

} 

사용자가 입력한 주소에 대한 정보를 추출하기 위해 결과를 필터링합니다.만약 우리가 주소를 찾았다면, 우리는 그것의 좌표로 showDirections를 호출할 것이다.주소를 찾지 못하면 오류 메시지가 표시되고 사용자에게 더 자세한 주소 정보를 요구합니다.

경로설정 방향

일단 시작 좌표가 생기면 사용자 위치에서 상점 위치까지의 운전 방향을 라우팅 API로 찾을 수 있습니다.우리가 지리적 위치나 TomSearch API를 통해 좌표를 얻든지 간에 신기한 일은 모두 showDirections에서 발생한다.

function showDirections(destLat, destLon) { 

   tomtom.routing({instructionsType: 'text'}) 

       .locations(`${destLat},${destLon}:${selectedStore.latitude},${selectedStore.longitude}`) 

       .go() 

       .then(function(routeGeoJson){ 

          generateRouteHtml(routeGeoJson); 

          currentRoute = tomtom.L.geoJson(routeGeoJson, { 

              style: {color: '#00d7ff', opacity: 0.6, weight: 8} 

          }).addTo(map); 

          map.fitBounds(currentRoute.getBounds(), {padding: [5, 5]}); 

       }); 

} 

여기 있습니다. 저희는 톰이라고 합니다.라우팅은 라우팅 API에 대한 호출을 시작합니다.이 객체에는 instructions Type 속성이 포함된 options 객체가 전달됩니다.우리가 이렇게 하는 것은 우리가 텍스트 운전 방향을 받을 수 있도록 하기 위해서이다. 우리는 사용자에게 표시할 수 있다.
Go 방법을 호출하여 API 호출을 시작하고 리셋 함수를 제공합니다. 이 함수는 루트를 생성한 후에 호출됩니다.콜백은 GeoJSON 객체를 수신하여 GenerateRootEHTML에 전달합니다.이 함수는 어떤 심상치 않은 일도 하지 않을 것이다.TomTom 라우팅 API에서 전송되는 운전 방향만 추출하고 이를 표시하기 위해 HTML을 구축합니다.

function generateRouteHtml(routeGeoJson) { 

   var guidance = routeGeoJson.features[0].properties.guidance; 

   var resultsContainer = jQuery("<div><h5>Directions</h5></div>"); 

   guidance.instructionGroups.forEach(function(instructionGroup) { 

       // Print name of the group 

       var groupEl = tomtom.L.DomUtil.create('p', 'tt-locator-user-directions-group'); 

       groupEl.innerHTML = instructionGroup.groupMessage; 

       resultsContainer.append(groupEl); 

       // Print steps of the group 

       var stepsEl = tomtom.L.DomUtil.create('p', 'ttlocator-user-directions-step'); 

       stepsEl.innerHTML = formatGroupSteps(guidance.instructions, instructionGroup); 

       resultsContainer.append(stepsEl); 

   }); 

   jQuery(".ttlocator-step-by-step-instructions").empty(); 

    jQuery(".ttlocator-step-by-step-instructions").append(resultsContainer) 

}

generateRouteHtml를 호출한 후, 우리는 지도에 루트 덮어쓰기를 추가해서 루트를 표시한 다음, 루트의 중심에 위치하도록 지도의 경계를 맞춥니다.
이게 진짜 전부야!일부 JavaScript 및 여러 API 호출을 통해 플러그인에 라우팅을 추가했습니다.

결론

이로써 우리는 TomTom 개발자 API를 사용하여 상점 위치추적기 워드프레스 플러그인을 처음부터 만드는 돌풍의 여정을 끝냈다.
우리는 처음에는 아무것도 없었다. 상대적으로 적은 코드만 있으면 아주 좋은, 사용할 수 있는 플러그인을 조립할 수 있었다.만약 당신이 코드를 다운로드하고 계속 관심을 가지고 있다면, 즉시 워드프레스 사이트에서 그것을 사용할 수 있습니다.
우리는 이것이 TomTomAPI와 WordPress를 결합하여 사용하는 데 유익한 소개가 되기를 바란다.상점 위치추적기는 TomTom과 WordPress를 결합한 많은 플러그인 중 하나일 뿐이라고 상상할 수 있다.당신은 어떤 훌륭한 플러그인을 만들 계획입니까?

Visit our developer portal and check out our documentation and examples for Web, iOS, and Android. Lastly, don't forget to connect with us on , Twitch, and , and check out our blog for more tutorials and developer forum for any questions you may have.

유쾌한 매핑!
TomTom은 최근 30년의 경험을 가지고 선도적인 포지셔닝 기술 전문가로 전 세계 자동차 업계, 기업과 개발자를 위해 가장 신뢰할 수 있는 지도, 네비게이션 소프트웨어, 교통과 현장 서비스를 개발한다.우리는 정밀한 기술을 창조하여 우리가 더욱 안전하고 청결하며 막히지 않는 세계에 대한 소망에 더욱 가까워지도록 노력한다.
본고는 처음으로 https://developer.tomtom.com/blog에 나타났다.원작자는 그레고리 드제임스다.