WordPressプラグイン:地図に店舗を追加する
36064 ワード
WordPressプラグイン+ Tomtom - Part 3
前のtwo articles in this seriesでは、我々はビジネスサイト上の店舗の場所の地図を表示するTomTom Map APIを使用してWordPressプラグインを作成してきました.
我々は、WordPressのプラグインを作成して任意のWordPressベースのWebサイトに迅速かつ簡単に地図表示APIを追加することを開始しました.これまでのところ、プラグインをWordPress Administratorインターフェイスとプラグインの管理パネルインターフェイスに表示できる基本的なプラグイン要素を構築しました.この時点で、マップが管理パネルに表示されます.
この記事では
ストアデータベースの作成
我々は地図を持っているが、それに表示するデータはありません.この例では、ローカルのSQLデータベースに格納されている位置情報を保存します.これは、WordPressサイトの一般的なオプションです.
まず、データベーステーブルを設定する必要があります.ユーザーがプラグインをアクティブにすると、ttlocatoround install ()関数を実行します.
register_activation_hook(__FILE__, 'ttlocator_install');
ttlocatorRound ()自体はデータベーステーブルを作成します.
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を使用して機能を追加します.
#マップへのストアの追加
以前はttlocatortle addpers storechen html ()のコールに気づきました.この関数は、新しいストアの場所を追加するために使用されるHTMLを生成します.
<div class="ttlocator-add-store-page">
#追加ストア
ストアの名前とアドレスを追加して、地図上の新しいストアを参照してくださいルックアップをクリックして起動します. 都市と州/地方をプラスする通りアドレスは、通常十分です.
あなたが地図上でポップアップするアドレスマーカーに満足しているならば、Saveをクリックしてください. しない場合は、アドレスに詳細を追加し、再度検索を絞り込むためにルックアップをクリックしてください.
<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、トロント”を入力すると、正しい国は、州、国、または郵便番号を提供していないが見つかった結果になります.あなたが上記の呼び出しで見ることができるように、我々は検索を作成するためにTomtomファジーサーチAPIを使用して、それを我々のTomTom APIキーを渡して、我々の質問を与えて、検索を開始するようにそれを指示して、それから彼らが呼ばれるコールバックを渡します.
locateecallback ()関数はかなり大きくなりますので、すぐにパスしましょう:
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によって返された結果をフィルタリングすることから始めます.その1つは、“ポイントアドレス”と入力し、アドレス自体についての高精度な情報が含まれます.他の結果は、アドレスまたはそのアドレスに存在する他のPOIS(関心のある点)についてかもしれません.
アドレス情報が必要なので、結果をフィルタリングして他のすべてを削除します.我々がアドレスを見つけるならば、ユーザーが新しい場所が正しい場所に現れるようにすることができるように、我々は地図上でポップアップを開きます.
アドレスを見つけることができない場合は、別のアドレスを試すことができますので、彼らが入力したアドレスについての詳細情報を追加するユーザーに通知します.
データベースへのストアの保存
ユーザーがストアの場所を検索して保存することができましたので、データベースにストアを追加するためのバックエンドコードが必要です.
これは、ストアロケータにある次の関数で行います.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リクエストの本文で送信されたデータを全て読みます.我々は、XPSsの攻撃を防ぐために読んだデータのすべての部分にWPSHERE StrpHelp AllHorsesタグを使用します.
次に、プリペアドステートメントを使用して、新しいストアの場所をデータベースに挿入します.最後に、ストアの作成が失敗した場合、エラーステータスコードを設定して、呼び出し側にデータベースの挿入に失敗したことを確認します.
地図上のマーカーのレンダリング
我々はadminのページを作成した今、それにマップを追加し、地図上の店舗を表示するには、ストア内のストアを保存することができます簡単です.我々がする必要があるすべては、各ストアのマップにマーカーを追加することです.我々がすでにStorelLocations変数にそれらを格納することによって、JavaScriptに利用できる我々の店場所の全てを作ったと思い出してください.
ロケータの行20から開始します.JSには次のコードが表示されます.
if(storeLocations.length > 0) {
storeLocations.forEach(store => addStoreMarkerToMap(store));
var markerGroup = new tomtom.L.featureGroup(markers);
fitMapToMarkerGroup(markerGroup);
}
ヘルパー関数の2つを呼び出すことに注意してください.addStoreMarkerMethomap ()とFitmapToMarkErrorRoup ().私は下記のコードを含めます、そして、我々は我々の地図マーカコードの全てを歩きます.
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);
}
}
ストアの追加コードの開始時に、StorelLocations内の各ストアにaddStoremArkerMethod ()を呼び出していることがわかります.
addStoremarkerModap ()を見て、マップにマーカーを追加するには、3行のコードを取るだけです.我々の店の緯度と経度を含む配列を作成することから始めます.これは、マップのマーカーを作成するように求めているときに、座標形式のリーフレットが期待されます.
次に、マーカーを作成し、次の呼び出しでマップに追加します.
var marker = tomtom.L.marker(location).addTo(map);
次に、ポップアップにマーカーをバインドします.ポップアップは、ユーザーが地図の場所を表すマーカーのいずれかをクリックすると、ユーザーが表示されるバブルです.作成したマーカーにbindpople ()を呼び出してポップアップを追加します.この関数に渡す唯一のパラメータは、マーカー内に表示されるHTMLを含む文字列です.
最後に、マーカ配列にマーカーを追加するので、マップ上のマーカーで動作する必要があります.
最初のマップセットアップコードに戻ると、次のようになります.
var markerGroup = new tomtom.L.featureGroup(markers);
fitMapToMarkerGroup(markerGroup);
ここでは、リーフレット機能を作成することから始めます.これは、私たちのマーカーをまとめてグループ化することによって、地図上のすべてのマップのマーカーに基づいて、地図上で操作を実行することが容易になります.
最後に、fitmaptomarkergroup ()を呼び出します.
map.fitBounds(markerGroup.getBounds().pad(0.2)); ,/pre>
ご覧のように、マップのFitBoundsメソッドを呼び出して、マーカグループの境界線にフィットするように頼みます.また、マーカーのどれも地図の端によって切られることを確実とするために少しのパディングを加えます.
次の手順
この記事では、サイト管理者がウェブサイトのストアマップを設定し、データベースにストアを追加し、地図上に表示するプラグイン機能を作成しました.
ストアデータをあなたのプラグインコードにハードコーディングするか、別のファイルでデータを保存することを含むストアデータ用のデータベースを使用する方法があります.我々は記事のこのシリーズでこれらのオプションをカバーしません.ただし、どのような方法でデータを格納するかに関係なく、アドレス情報と緯度と経度座標の両方を指定する必要があります.
次の記事では、同じツールを使用して、パブリックWebページに挿入できるマップウィジェットに対応するユーザーを構築します.このウィジェットは、Webリソース用の同じマップSDKを使用し、管理パネルを介して構成されているストアデータベースからそのデータを描画します.
私たちのGitHubアカウント上でTomTomストアロケータのソースコードを見つけてください.
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);
});
});
locateecallback ()関数はかなり大きくなりますので、すぐにパスしましょう:
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リクエストの本文で送信されたデータを全て読みます.我々は、XPSsの攻撃を防ぐために読んだデータのすべての部分にWPSHERE StrpHelp AllHorsesタグを使用します.
次に、プリペアドステートメントを使用して、新しいストアの場所をデータベースに挿入します.最後に、ストアの作成が失敗した場合、エラーステータスコードを設定して、呼び出し側にデータベースの挿入に失敗したことを確認します.
地図上のマーカーのレンダリング
我々はadminのページを作成した今、それにマップを追加し、地図上の店舗を表示するには、ストア内のストアを保存することができます簡単です.我々がする必要があるすべては、各ストアのマップにマーカーを追加することです.我々がすでにStorelLocations変数にそれらを格納することによって、JavaScriptに利用できる我々の店場所の全てを作ったと思い出してください.
ロケータの行20から開始します.JSには次のコードが表示されます.
if(storeLocations.length > 0) {
storeLocations.forEach(store => addStoreMarkerToMap(store));
var markerGroup = new tomtom.L.featureGroup(markers);
fitMapToMarkerGroup(markerGroup);
}
ヘルパー関数の2つを呼び出すことに注意してください.addStoreMarkerMethomap ()とFitmapToMarkErrorRoup ().私は下記のコードを含めます、そして、我々は我々の地図マーカコードの全てを歩きます.
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);
}
}
ストアの追加コードの開始時に、StorelLocations内の各ストアにaddStoremArkerMethod ()を呼び出していることがわかります.
addStoremarkerModap ()を見て、マップにマーカーを追加するには、3行のコードを取るだけです.我々の店の緯度と経度を含む配列を作成することから始めます.これは、マップのマーカーを作成するように求めているときに、座標形式のリーフレットが期待されます.
次に、マーカーを作成し、次の呼び出しでマップに追加します.
var marker = tomtom.L.marker(location).addTo(map);
次に、ポップアップにマーカーをバインドします.ポップアップは、ユーザーが地図の場所を表すマーカーのいずれかをクリックすると、ユーザーが表示されるバブルです.作成したマーカーにbindpople ()を呼び出してポップアップを追加します.この関数に渡す唯一のパラメータは、マーカー内に表示されるHTMLを含む文字列です.
最後に、マーカ配列にマーカーを追加するので、マップ上のマーカーで動作する必要があります.
最初のマップセットアップコードに戻ると、次のようになります.
var markerGroup = new tomtom.L.featureGroup(markers);
fitMapToMarkerGroup(markerGroup);
ここでは、リーフレット機能を作成することから始めます.これは、私たちのマーカーをまとめてグループ化することによって、地図上のすべてのマップのマーカーに基づいて、地図上で操作を実行することが容易になります.
最後に、fitmaptomarkergroup ()を呼び出します.
map.fitBounds(markerGroup.getBounds().pad(0.2)); ,/pre>
ご覧のように、マップのFitBoundsメソッドを呼び出して、マーカグループの境界線にフィットするように頼みます.また、マーカーのどれも地図の端によって切られることを確実とするために少しのパディングを加えます.
次の手順
この記事では、サイト管理者がウェブサイトのストアマップを設定し、データベースにストアを追加し、地図上に表示するプラグイン機能を作成しました.
ストアデータをあなたのプラグインコードにハードコーディングするか、別のファイルでデータを保存することを含むストアデータ用のデータベースを使用する方法があります.我々は記事のこのシリーズでこれらのオプションをカバーしません.ただし、どのような方法でデータを格納するかに関係なく、アドレス情報と緯度と経度座標の両方を指定する必要があります.
次の記事では、同じツールを使用して、パブリックWebページに挿入できるマップウィジェットに対応するユーザーを構築します.このウィジェットは、Webリソース用の同じマップSDKを使用し、管理パネルを介して構成されているストアデータベースからそのデータを描画します.
私たちのGitHubアカウント上でTomTomストアロケータのソースコードを見つけてください.
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();
}
我々はadminのページを作成した今、それにマップを追加し、地図上の店舗を表示するには、ストア内のストアを保存することができます簡単です.我々がする必要があるすべては、各ストアのマップにマーカーを追加することです.我々がすでにStorelLocations変数にそれらを格納することによって、JavaScriptに利用できる我々の店場所の全てを作ったと思い出してください.
ロケータの行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);
}
}
addStoremarkerModap ()を見て、マップにマーカーを追加するには、3行のコードを取るだけです.我々の店の緯度と経度を含む配列を作成することから始めます.これは、マップのマーカーを作成するように求めているときに、座標形式のリーフレットが期待されます.
次に、マーカーを作成し、次の呼び出しでマップに追加します.
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>
次の手順
この記事では、サイト管理者がウェブサイトのストアマップを設定し、データベースにストアを追加し、地図上に表示するプラグイン機能を作成しました.
ストアデータをあなたのプラグインコードにハードコーディングするか、別のファイルでデータを保存することを含むストアデータ用のデータベースを使用する方法があります.我々は記事のこのシリーズでこれらのオプションをカバーしません.ただし、どのような方法でデータを格納するかに関係なく、アドレス情報と緯度と経度座標の両方を指定する必要があります.
次の記事では、同じツールを使用して、パブリックWebページに挿入できるマップウィジェットに対応するユーザーを構築します.このウィジェットは、Webリソース用の同じマップSDKを使用し、管理パネルを介して構成されているストアデータベースからそのデータを描画します.
私たちのGitHubアカウント上でTomTomストアロケータのソースコードを見つけてください.
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