WordPress 플러그인: 지도에 상점 추가
36296 단어 javascripttutorialwordpress
WordPress 플러그인 + TomTom – 섹션 3
앞two articles in this series에서 우리는 TomTom Maps API를 사용하여 비즈니스 사이트에 가게 위치의 지도를 표시하는 워드프레스 플러그인을 만들었습니다.
WordPress 플러그인을 만들어서 지도 표시 API를 WordPress 기반 사이트에 추가하는 것이 빠르고 간단합니다.지금까지 우리는 플러그인을 워드프레스 관리자 인터페이스와 플러그인의 관리 패널 인터페이스에 나타낼 수 있도록 기본적인 플러그인 요소를 구축했다.지도가 관리 패널에 표시됩니다.
본문에서 우리는 다음과 같이 할 것이다.
스토리지 데이터베이스 생성
우리는 지도를 한 장 가지고 있지만, 위에 표시된 데이터는 없다.이 예에서는 로컬 SQL 데이터베이스에 저장된 위치 데이터를 저장하고 읽어들입니다.이것은 워드프레스 사이트에서 흔히 볼 수 있는 옵션입니다.
우선, 우리는 데이터베이스 테이블을 설정해야 한다.사용자가 플러그인을 활성화하면 다음 명령은 ttlocator\u install () 함수를 실행합니다.
register_activation_hook(__FILE__, 'ttlocator_install');
ttlocator_install() 자체로 데이터베이스 테이블을 만들지만 데이터베이스 테이블이 없는 경우에만 다음을 수행합니다.
function ttlocator_install() {
global $wpdb;
$table_name = $wpdb->prefix . "tomtom_locator_locations";
$charset_collate = $wpdb->get_charset_collate();
$sql = "CREATE TABLE $table_name (
id mediumint(9) NOT NULL AUTO_INCREMENT,
name text,
address text,
city text,
state tinytext,
country text,
postcode tinytext,
latitude decimal(10,6),
longitude decimal(10,6),
PRIMARY KEY(id)
) $charset_collate;";
require_once(ABSPATH . "wp-admin/includes/upgrade.php");
dbDelta( $sql );
}
이 표는 사용자가 입력할 데이터 필드를 포함합니다: 상점 이름, 주소 (도시, 주, 국가, 우편 번호 포함).데이터베이스는 저장 ID와 키를 제공합니다.
맵은 API가 위도와 경도 좌표를 사용하여 맵에 관심사를 표시합니다.우리는 데이터베이스에 위도와 경도 필드를 포함하지만, 사용자가 스스로 이 데이터를 찾을 수 있도록 하지는 않는다.대신 주소와 TomTom 검색 API를 사용하여 위도와 경도를 자동으로 찾는 특성을 추가합니다.
#지도에 매장 추가
앞에서 ttlocator\uadd\ustore\uhtml()에 대한 호출을 눈치챘을 수도 있습니다.이 함수는 새 매장 위치를 추가하기 위한 HTML을 생성합니다.
<div class="ttlocator-add-store-page">
#스토리지 추가
먼저 가게 이름과 주소를 추가한 다음 찾기를 누르면 지도에서 새 가게를 볼 수 있습니다. 거리 주소에 도시와 주/성을 더하면 통상적으로 충분하다.
지도에서 팝업한 주소 표시가 마음에 드시면'저장'을 누르십시오. 없으면 주소에 더 자세한 정보를 추가한 다음 "찾기"를 다시 눌러 검색을 최적화하십시오.
<div class="ttlocator-row">
<div class="ttlocator-field-label">
<label for="store-name">Store Name</label>
</div>
<div class="ttlocator-text-field">
<input name="store-name" style="width: 100%" type="text" />
</div>
</div>
<div class="ttlocator-row">
<div class="ttlocator-field-label">
<label for="store-address">Store Address</label>
</div>
<div class="ttlocator-text-field">
<input name="store-address" style="width: 100%" type="text" />
</div>
<div class="ttlocator-field-button">
<button class="button button-primary ttlocator-lookup-button">
Lookup
</button>
</div>
</div>
<div class="ttlocator-row ttlocator-lookup-message-area">
<p id="ttlocator-store-lookup-messages"> </p>
</div>
<div class="ttlocator-row">
<button class="button ttlocator-add-store-cancel">Cancel</button>
<div class="ttlocator-add-store-save"><button class="button button-primary">Save</button></div>
</div>
</div>
<?php xmp=""?>?php>
여기에는 특별한 점이 없습니다. JavaScript를 통해 상호작용할 HTML 요소만 생성됩니다.사용자가 스토어 이름과 주소를 입력하고 찾기 를 클릭하여 TomTom 검색 API를 호출하여 주소에 대한 정보를 찾습니다.
주소를 찾으면 지도에 표시됩니다.만약 사용자가 그들이 본 내용을 좋아한다면, 그들은 상점을 지도 데이터베이스에 추가할 기회가 있을 것이다.
검색 API를 사용하여 좌표 가져오기
이것이 바로 신기한 일이기 때문에 찾기 단추의 클릭 처리 프로그램에 중점을 두자.
jQuery('.ttlocator-lookup-button').click(function() {
var query = jQuery("input[name='store-address']").val();
tomtom.fuzzySearch()
.key(window.tomtomSdkKey)
.query(query)
.go()
.then(locateCallback)
.catch(function(error) {
console.log(error);
});
});
우리는 우선 저장 주소가 입력한 값을 얻는다.여기에서 입력한 주소를 사용하여 TomTom 모호 검색 API로 보내는 질의를 수행합니다.사용자가 입력한 데이터가 정확하지 않아도 모호한 검색 API는 주소를 찾을 수 있습니다.예를 들어 "1 Yonge St, Toronto"를 모호한 검색 검색으로 입력하면 성, 국가 또는 우편 번호가 제공되지 않아도 정확한 주소를 찾을 수 있습니다.위의 호출에서 보듯이 TomTom 모호 검색 API를 사용하여 검색을 만들고 TomTom API 키를 전달하여 검색을 시작하고 리셋을 전달합니다. 이 리셋은 검색이 끝난 후에 호출됩니다.
locateCallback() 함수가 상당히 커서 빠르게 살펴보겠습니다.
function locateCallback(result) {
jQuery('#ttlocator-store-lookup-messages').text('');
var filteredResult = result && result.filter(r => r.type === "Point Address") || [];
if(filteredResult.length > 0) {
jQuery('.ttlocator-add-store-save').show();
var topResult = filteredResult[0];
var address = topResult.address;
var newStoreName = jQuery('input[name="store-name"]').val();
// save new store address info so we can add it to database
// after user confirms it is correct.
newStoreAddress = {
streetAddress: address.streetNumber + " " + address.streetName,
city: address.municipality.split(",")[0],
state: address.countrySubdivision,
postCode: address.extendedPostalCode || address.postalCode,
country: address.country,
lat: topResult.position.lat,
lon: topResult.position.lon
};
var location = [topResult.position.lat, topResult.position.lon];
map.setView(location, 15);
var marker = tomtom.L.marker(location).addTo(map);
marker.bindPopup("" + newStoreName + "
" + address.freeformAddress)
.openPopup();
newMarker = marker;
} else {
jQuery('#ttlocator-store-lookup-messages').text("Address not found. Try changing the address or adding more information, such as country and zip/postal code.")
}
}
먼저 TomTom 모호 검색 API가 반환하는 결과를 필터링하여 점 주소 유형을 제외한 모든 결과를 삭제합니다. 모호 검색을 사용할 때 특정 주소에 대해 여러 개의 검색 결과가 있을 수 있습니다.그 중 하나는'점 주소'로 주소 자체에 대한 고도의 정확한 정보를 포함할 것이다.기타 결과는 해당 주소에 거주하는 기업 또는 기타 POI(관심사)와 관련이 있을 수 있습니다.
우리는 주소 정보만 필요하기 때문에, 다른 모든 내용을 삭제하기 위해 결과를 필터합니다.만약 우리가 주소를 찾게 된다면, 우리는 지도에 팝업 창을 열 것이다. 그러면 사용자는 새로운 위치가 정확한 위치에 나타날 수 있을 것이다.
만약 우리가 주소를 찾지 못한다면, 우리는 사용자에게 다른 주소를 시도하거나 그들이 입력한 주소에 대한 더 많은 정보를 추가할 수 있도록 통지할 것이다.
데이터베이스에 저장
우리는 사용자가 상점의 위치를 찾고 저장할 수 있도록 하기 때문에, 백엔드 코드가 상점을 데이터베이스에 추가해야 한다.
우리는 상점 위치추적기의 다음 함수에서 이 동작을 실행합니다.php():
function ttlocator_add_location() {
if (!is_admin()) wp_die();
global $wpdb;
$table_name = $wpdb->prefix . "tomtom_locator_locations";
$name = wp_strip_all_tags($_POST["name"]);
$address = wp_strip_all_tags($_POST["address"]);
$city = wp_strip_all_tags($_POST["city"]);
$state = wp_strip_all_tags($_POST["state"]);
$country = wp_strip_all_tags($_POST["country"]);
$postcode = wp_strip_all_tags($_POST["postcode"]);
$latitude = wp_strip_all_tags($_POST["latitude"]);
$longitude = wp_strip_all_tags($_POST["longitude"]);
$success = $wpdb->query($wpdb->prepare("
INSERT INTO $table_name (
name,
address,
city,
state,
country,
postcode,
latitude,
longitude
)
VALUES (%s, %s, %s, %s, %s, %s, %f, %f);
", array($name, $address, $city, $state, $country, $postcode, $latitude, $longitude)));
if(!$success) {
status_header(500);
}
wp_die();
}
이 함수를 등록하여 AJAX 요청을 받습니다.이렇게 하면 양식 게시 없이 JavaScript를 통해 새 스토어를 제출할 수 있습니다.전통적인 방식으로 하는 것은 틀린 것이 없지만 AJAX 수신 상점을 통해 UI를 구축하는 데 더 큰 유연성을 추가했다.
우리는 먼저 사용자가 관리자인지 확인하고 그렇지 않으면 즉시 종료합니다.다음에 우리는 데이터베이스 설정을 조금 한다.
그런 다음 POST 요청 주체에서 제출한 모든 데이터를 읽습니다.우리는 읽은 모든 단락의 데이터에 wp\ustrip\uall\u 태그를 사용하여 XSS 공격을 방지합니다.
그리고 우리는 준비된 문구를 사용하여 데이터베이스에 새로운 저장 위치를 삽입합니다.마지막으로, 저장소 생성이 실패하면, 데이터베이스 삽입이 실패했다는 것을 호출자가 알 수 있도록 오류 상태 코드를 설정합니다.
지도의 저장 표시 렌더링
현재 우리는 우리의 관리 페이지를 만들고 지도를 추가했으며 데이터베이스에 상점을 저장할 수 있으며 지도에 상점을 표시하는 것이 매우 쉽다.우리가 해야 할 일은 지도상에 모든 상점에 표시를 추가하는 것이다.다시 생각해 보면, 우리는 모든 저장 위치를storeLocations 변수에 저장해서 자바스크립트가 그것을 사용할 수 있도록 했다.
위치추적기의 20줄부터 시작합니다.js, 다음 코드를 볼 수 있습니다.
if(storeLocations.length > 0) {
storeLocations.forEach(store => addStoreMarkerToMap(store));
var markerGroup = new tomtom.L.featureGroup(markers);
fitMapToMarkerGroup(markerGroup);
}
addStoreMarkerToMap () 및fitMapToMarkerGroup () 두 개의 조수 함수를 호출한 것을 알 수 있습니다.나는 아래의 코드를 포함할 것이다. 그리고 우리는 모든 지도 표기 코드를 두루 훑어볼 것이다.
function addStoreMarkerToMap(store) {
var location = [store.latitude, store.longitude];
var marker = tomtom.L.marker(location).addTo(map);
marker.bindPopup("" + store.name + "
" + store.address);
markers.push(marker);
}
function fitMapToMarkerGroup(markerGroup) {
map.fitBounds(markerGroup.getBounds().pad(0.2));
if (map.getZoom() > MAX_ZOOM_ON_LOAD) {
map.setZoom(MAX_ZOOM_ON_LOAD);
}
}
상점에 코드를 추가하는 시작부터, 우리는storeLocations의 모든 상점에서addStoreMarkerToMap () 을 호출하고 있는 것을 보았다.
addStoreMarkerToMap () 에서 우리는 세 줄의 코드만 있으면 표시를 지도에 추가할 수 있는 것을 보았다.우리는 먼저 상점의 위도와 경도를 포함하는 수조를 만들었다.이것은 매뉴얼에 지도 표시를 만들 때 필요한 좌표 형식입니다.
그런 다음 마크업을 만들고 다음 호출을 사용하여 맵에 추가합니다.
var marker = tomtom.L.marker(location).addTo(map);
그리고 팝업 창을 태그에 연결합니다.팝업 창은 지도 사용자가 가게 위치를 대표하는 표시 중 하나를 눌렀을 때 볼 수 있는 기포입니다.방금 만든 태그에 bindPopup () 을 호출하여 팝업 창을 추가합니다.이 함수에 전달되는 유일한 매개 변수는 태그에 나타날 HTML을 포함하는 문자열입니다.
마지막으로, 우리는 지도에 표시된 다른 함수를 사용할 수 있도록 표시를 표시 그룹에 추가합니다.
초기 맵 설정 코드로 돌아가면 다음 내용을 볼 수 있습니다.
var markerGroup = new tomtom.L.featureGroup(markers);
fitMapToMarkerGroup(markerGroup);
여기서 전단 기능 그룹을 만드는 것부터 시작합니다.이것은 우리의 표기를 한데 조합하여 우리로 하여금 모든 지도 표기의 집단 특징에 따라 지도에서 조작을 더욱 쉽게 하게 한다.
마지막으로 fitMapToMarkerGroup()을 호출합니다.
map.fitBounds(markerGroup.getBounds().pad(0.2)); ,/pre>
보시다시피 맵의fitBounds 방법을 호출하여 표시 그룹의 경계에 적응하도록 예의 바르게 요구합니다.우리는 지도의 가장자리가 끊어지지 않도록 약간의 충전을 추가했다.
다음 단계
본고에서 우리는 사이트 관리자가 사이트에 상점 지도를 설정하고 상점을 데이터베이스에 추가하여 지도에 표시할 수 있도록 플러그인 기능을 만들기 시작했다.
데이터베이스를 사용하여 데이터를 저장하는 것 외에 저장 데이터를 플러그인 코드에 하드코딩하거나 단독 파일에 저장하는 방법도 있다.이 시리즈에서 우리는 이러한 옵션을 소개하지 않을 것이다.그러나 어떤 방식으로 데이터를 저장하든지 주소 정보와 경위도 좌표를 제공해야 한다는 것을 주의하십시오.
다음 글에서, 우리는 같은 도구를 사용하여 사용자를 위한 지도의 작은 위젯을 구축할 것이며, 우리는 그것을 공공 웹 페이지에 삽입할 수 있다.이 작은 위젯은 웹 자원에 같은 Maps SDK를 사용하고 관리 패널을 통해 설정된 저장 데이터베이스에서 데이터를 추출합니다.
저희 GitHub 계정에서 TomTom Store 포지셔닝 소스 코드를 찾으십시오.
Reference
이 문제에 관하여(WordPress 플러그인: 지도에 상점 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/tomtomdevs/wordpress-plugins-adding-stores-to-a-map-1og3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
register_activation_hook(__FILE__, 'ttlocator_install');
function ttlocator_install() {
global $wpdb;
$table_name = $wpdb->prefix . "tomtom_locator_locations";
$charset_collate = $wpdb->get_charset_collate();
$sql = "CREATE TABLE $table_name (
id mediumint(9) NOT NULL AUTO_INCREMENT,
name text,
address text,
city text,
state tinytext,
country text,
postcode tinytext,
latitude decimal(10,6),
longitude decimal(10,6),
PRIMARY KEY(id)
) $charset_collate;";
require_once(ABSPATH . "wp-admin/includes/upgrade.php");
dbDelta( $sql );
}
<div class="ttlocator-add-store-page">
<div class="ttlocator-row">
<div class="ttlocator-field-label">
<label for="store-name">Store Name</label>
</div>
<div class="ttlocator-text-field">
<input name="store-name" style="width: 100%" type="text" />
</div>
</div>
<div class="ttlocator-row">
<div class="ttlocator-field-label">
<label for="store-address">Store Address</label>
</div>
<div class="ttlocator-text-field">
<input name="store-address" style="width: 100%" type="text" />
</div>
<div class="ttlocator-field-button">
<button class="button button-primary ttlocator-lookup-button">
Lookup
</button>
</div>
</div>
<div class="ttlocator-row ttlocator-lookup-message-area">
<p id="ttlocator-store-lookup-messages"> </p>
</div>
<div class="ttlocator-row">
<button class="button ttlocator-add-store-cancel">Cancel</button>
<div class="ttlocator-add-store-save"><button class="button button-primary">Save</button></div>
</div>
</div>
<?php xmp=""?>?php>
이것이 바로 신기한 일이기 때문에 찾기 단추의 클릭 처리 프로그램에 중점을 두자.
jQuery('.ttlocator-lookup-button').click(function() {
var query = jQuery("input[name='store-address']").val();
tomtom.fuzzySearch()
.key(window.tomtomSdkKey)
.query(query)
.go()
.then(locateCallback)
.catch(function(error) {
console.log(error);
});
});
locateCallback() 함수가 상당히 커서 빠르게 살펴보겠습니다.
function locateCallback(result) {
jQuery('#ttlocator-store-lookup-messages').text('');
var filteredResult = result && result.filter(r => r.type === "Point Address") || [];
if(filteredResult.length > 0) {
jQuery('.ttlocator-add-store-save').show();
var topResult = filteredResult[0];
var address = topResult.address;
var newStoreName = jQuery('input[name="store-name"]').val();
// save new store address info so we can add it to database
// after user confirms it is correct.
newStoreAddress = {
streetAddress: address.streetNumber + " " + address.streetName,
city: address.municipality.split(",")[0],
state: address.countrySubdivision,
postCode: address.extendedPostalCode || address.postalCode,
country: address.country,
lat: topResult.position.lat,
lon: topResult.position.lon
};
var location = [topResult.position.lat, topResult.position.lon];
map.setView(location, 15);
var marker = tomtom.L.marker(location).addTo(map);
marker.bindPopup("" + newStoreName + "
" + address.freeformAddress)
.openPopup();
newMarker = marker;
} else {
jQuery('#ttlocator-store-lookup-messages').text("Address not found. Try changing the address or adding more information, such as country and zip/postal code.")
}
}
우리는 주소 정보만 필요하기 때문에, 다른 모든 내용을 삭제하기 위해 결과를 필터합니다.만약 우리가 주소를 찾게 된다면, 우리는 지도에 팝업 창을 열 것이다. 그러면 사용자는 새로운 위치가 정확한 위치에 나타날 수 있을 것이다.
만약 우리가 주소를 찾지 못한다면, 우리는 사용자에게 다른 주소를 시도하거나 그들이 입력한 주소에 대한 더 많은 정보를 추가할 수 있도록 통지할 것이다.
데이터베이스에 저장
우리는 사용자가 상점의 위치를 찾고 저장할 수 있도록 하기 때문에, 백엔드 코드가 상점을 데이터베이스에 추가해야 한다.
우리는 상점 위치추적기의 다음 함수에서 이 동작을 실행합니다.php():
function ttlocator_add_location() {
if (!is_admin()) wp_die();
global $wpdb;
$table_name = $wpdb->prefix . "tomtom_locator_locations";
$name = wp_strip_all_tags($_POST["name"]);
$address = wp_strip_all_tags($_POST["address"]);
$city = wp_strip_all_tags($_POST["city"]);
$state = wp_strip_all_tags($_POST["state"]);
$country = wp_strip_all_tags($_POST["country"]);
$postcode = wp_strip_all_tags($_POST["postcode"]);
$latitude = wp_strip_all_tags($_POST["latitude"]);
$longitude = wp_strip_all_tags($_POST["longitude"]);
$success = $wpdb->query($wpdb->prepare("
INSERT INTO $table_name (
name,
address,
city,
state,
country,
postcode,
latitude,
longitude
)
VALUES (%s, %s, %s, %s, %s, %s, %f, %f);
", array($name, $address, $city, $state, $country, $postcode, $latitude, $longitude)));
if(!$success) {
status_header(500);
}
wp_die();
}
이 함수를 등록하여 AJAX 요청을 받습니다.이렇게 하면 양식 게시 없이 JavaScript를 통해 새 스토어를 제출할 수 있습니다.전통적인 방식으로 하는 것은 틀린 것이 없지만 AJAX 수신 상점을 통해 UI를 구축하는 데 더 큰 유연성을 추가했다.
우리는 먼저 사용자가 관리자인지 확인하고 그렇지 않으면 즉시 종료합니다.다음에 우리는 데이터베이스 설정을 조금 한다.
그런 다음 POST 요청 주체에서 제출한 모든 데이터를 읽습니다.우리는 읽은 모든 단락의 데이터에 wp\ustrip\uall\u 태그를 사용하여 XSS 공격을 방지합니다.
그리고 우리는 준비된 문구를 사용하여 데이터베이스에 새로운 저장 위치를 삽입합니다.마지막으로, 저장소 생성이 실패하면, 데이터베이스 삽입이 실패했다는 것을 호출자가 알 수 있도록 오류 상태 코드를 설정합니다.
지도의 저장 표시 렌더링
현재 우리는 우리의 관리 페이지를 만들고 지도를 추가했으며 데이터베이스에 상점을 저장할 수 있으며 지도에 상점을 표시하는 것이 매우 쉽다.우리가 해야 할 일은 지도상에 모든 상점에 표시를 추가하는 것이다.다시 생각해 보면, 우리는 모든 저장 위치를storeLocations 변수에 저장해서 자바스크립트가 그것을 사용할 수 있도록 했다.
위치추적기의 20줄부터 시작합니다.js, 다음 코드를 볼 수 있습니다.
if(storeLocations.length > 0) {
storeLocations.forEach(store => addStoreMarkerToMap(store));
var markerGroup = new tomtom.L.featureGroup(markers);
fitMapToMarkerGroup(markerGroup);
}
addStoreMarkerToMap () 및fitMapToMarkerGroup () 두 개의 조수 함수를 호출한 것을 알 수 있습니다.나는 아래의 코드를 포함할 것이다. 그리고 우리는 모든 지도 표기 코드를 두루 훑어볼 것이다.
function addStoreMarkerToMap(store) {
var location = [store.latitude, store.longitude];
var marker = tomtom.L.marker(location).addTo(map);
marker.bindPopup("" + store.name + "
" + store.address);
markers.push(marker);
}
function fitMapToMarkerGroup(markerGroup) {
map.fitBounds(markerGroup.getBounds().pad(0.2));
if (map.getZoom() > MAX_ZOOM_ON_LOAD) {
map.setZoom(MAX_ZOOM_ON_LOAD);
}
}
상점에 코드를 추가하는 시작부터, 우리는storeLocations의 모든 상점에서addStoreMarkerToMap () 을 호출하고 있는 것을 보았다.
addStoreMarkerToMap () 에서 우리는 세 줄의 코드만 있으면 표시를 지도에 추가할 수 있는 것을 보았다.우리는 먼저 상점의 위도와 경도를 포함하는 수조를 만들었다.이것은 매뉴얼에 지도 표시를 만들 때 필요한 좌표 형식입니다.
그런 다음 마크업을 만들고 다음 호출을 사용하여 맵에 추가합니다.
var marker = tomtom.L.marker(location).addTo(map);
그리고 팝업 창을 태그에 연결합니다.팝업 창은 지도 사용자가 가게 위치를 대표하는 표시 중 하나를 눌렀을 때 볼 수 있는 기포입니다.방금 만든 태그에 bindPopup () 을 호출하여 팝업 창을 추가합니다.이 함수에 전달되는 유일한 매개 변수는 태그에 나타날 HTML을 포함하는 문자열입니다.
마지막으로, 우리는 지도에 표시된 다른 함수를 사용할 수 있도록 표시를 표시 그룹에 추가합니다.
초기 맵 설정 코드로 돌아가면 다음 내용을 볼 수 있습니다.
var markerGroup = new tomtom.L.featureGroup(markers);
fitMapToMarkerGroup(markerGroup);
여기서 전단 기능 그룹을 만드는 것부터 시작합니다.이것은 우리의 표기를 한데 조합하여 우리로 하여금 모든 지도 표기의 집단 특징에 따라 지도에서 조작을 더욱 쉽게 하게 한다.
마지막으로 fitMapToMarkerGroup()을 호출합니다.
map.fitBounds(markerGroup.getBounds().pad(0.2)); ,/pre>
보시다시피 맵의fitBounds 방법을 호출하여 표시 그룹의 경계에 적응하도록 예의 바르게 요구합니다.우리는 지도의 가장자리가 끊어지지 않도록 약간의 충전을 추가했다.
다음 단계
본고에서 우리는 사이트 관리자가 사이트에 상점 지도를 설정하고 상점을 데이터베이스에 추가하여 지도에 표시할 수 있도록 플러그인 기능을 만들기 시작했다.
데이터베이스를 사용하여 데이터를 저장하는 것 외에 저장 데이터를 플러그인 코드에 하드코딩하거나 단독 파일에 저장하는 방법도 있다.이 시리즈에서 우리는 이러한 옵션을 소개하지 않을 것이다.그러나 어떤 방식으로 데이터를 저장하든지 주소 정보와 경위도 좌표를 제공해야 한다는 것을 주의하십시오.
다음 글에서, 우리는 같은 도구를 사용하여 사용자를 위한 지도의 작은 위젯을 구축할 것이며, 우리는 그것을 공공 웹 페이지에 삽입할 수 있다.이 작은 위젯은 웹 자원에 같은 Maps SDK를 사용하고 관리 패널을 통해 설정된 저장 데이터베이스에서 데이터를 추출합니다.
저희 GitHub 계정에서 TomTom Store 포지셔닝 소스 코드를 찾으십시오.
Reference
이 문제에 관하여(WordPress 플러그인: 지도에 상점 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/tomtomdevs/wordpress-plugins-adding-stores-to-a-map-1og3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
function ttlocator_add_location() {
if (!is_admin()) wp_die();
global $wpdb;
$table_name = $wpdb->prefix . "tomtom_locator_locations";
$name = wp_strip_all_tags($_POST["name"]);
$address = wp_strip_all_tags($_POST["address"]);
$city = wp_strip_all_tags($_POST["city"]);
$state = wp_strip_all_tags($_POST["state"]);
$country = wp_strip_all_tags($_POST["country"]);
$postcode = wp_strip_all_tags($_POST["postcode"]);
$latitude = wp_strip_all_tags($_POST["latitude"]);
$longitude = wp_strip_all_tags($_POST["longitude"]);
$success = $wpdb->query($wpdb->prepare("
INSERT INTO $table_name (
name,
address,
city,
state,
country,
postcode,
latitude,
longitude
)
VALUES (%s, %s, %s, %s, %s, %s, %f, %f);
", array($name, $address, $city, $state, $country, $postcode, $latitude, $longitude)));
if(!$success) {
status_header(500);
}
wp_die();
}
현재 우리는 우리의 관리 페이지를 만들고 지도를 추가했으며 데이터베이스에 상점을 저장할 수 있으며 지도에 상점을 표시하는 것이 매우 쉽다.우리가 해야 할 일은 지도상에 모든 상점에 표시를 추가하는 것이다.다시 생각해 보면, 우리는 모든 저장 위치를storeLocations 변수에 저장해서 자바스크립트가 그것을 사용할 수 있도록 했다.
위치추적기의 20줄부터 시작합니다.js, 다음 코드를 볼 수 있습니다.
if(storeLocations.length > 0) {
storeLocations.forEach(store => addStoreMarkerToMap(store));
var markerGroup = new tomtom.L.featureGroup(markers);
fitMapToMarkerGroup(markerGroup);
}
function addStoreMarkerToMap(store) {
var location = [store.latitude, store.longitude];
var marker = tomtom.L.marker(location).addTo(map);
marker.bindPopup("" + store.name + "
" + store.address);
markers.push(marker);
}
function fitMapToMarkerGroup(markerGroup) {
map.fitBounds(markerGroup.getBounds().pad(0.2));
if (map.getZoom() > MAX_ZOOM_ON_LOAD) {
map.setZoom(MAX_ZOOM_ON_LOAD);
}
}
addStoreMarkerToMap () 에서 우리는 세 줄의 코드만 있으면 표시를 지도에 추가할 수 있는 것을 보았다.우리는 먼저 상점의 위도와 경도를 포함하는 수조를 만들었다.이것은 매뉴얼에 지도 표시를 만들 때 필요한 좌표 형식입니다.
그런 다음 마크업을 만들고 다음 호출을 사용하여 맵에 추가합니다.
var marker = tomtom.L.marker(location).addTo(map);
마지막으로, 우리는 지도에 표시된 다른 함수를 사용할 수 있도록 표시를 표시 그룹에 추가합니다.
초기 맵 설정 코드로 돌아가면 다음 내용을 볼 수 있습니다.
var markerGroup = new tomtom.L.featureGroup(markers);
fitMapToMarkerGroup(markerGroup);
마지막으로 fitMapToMarkerGroup()을 호출합니다.
map.fitBounds(markerGroup.getBounds().pad(0.2)); ,/pre>
다음 단계
본고에서 우리는 사이트 관리자가 사이트에 상점 지도를 설정하고 상점을 데이터베이스에 추가하여 지도에 표시할 수 있도록 플러그인 기능을 만들기 시작했다.
데이터베이스를 사용하여 데이터를 저장하는 것 외에 저장 데이터를 플러그인 코드에 하드코딩하거나 단독 파일에 저장하는 방법도 있다.이 시리즈에서 우리는 이러한 옵션을 소개하지 않을 것이다.그러나 어떤 방식으로 데이터를 저장하든지 주소 정보와 경위도 좌표를 제공해야 한다는 것을 주의하십시오.
다음 글에서, 우리는 같은 도구를 사용하여 사용자를 위한 지도의 작은 위젯을 구축할 것이며, 우리는 그것을 공공 웹 페이지에 삽입할 수 있다.이 작은 위젯은 웹 자원에 같은 Maps SDK를 사용하고 관리 패널을 통해 설정된 저장 데이터베이스에서 데이터를 추출합니다.
저희 GitHub 계정에서 TomTom Store 포지셔닝 소스 코드를 찾으십시오.
Reference
이 문제에 관하여(WordPress 플러그인: 지도에 상점 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/tomtomdevs/wordpress-plugins-adding-stores-to-a-map-1og3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(WordPress 플러그인: 지도에 상점 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/tomtomdevs/wordpress-plugins-adding-stores-to-a-map-1og3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
