WordPress + TomTom教程系列三：WordPress插件：将商店添加到地图
WordPress + TomTom教程（4部分系列）
WordPress插件+ TomTom –第3部分
在本系列的前两篇文章中，我们已经创建了一个WordPress插件，该插件使用TomTom Maps API在商业网站上显示店面位置的地图。
我们开始创建WordPress插件，从而可以快速，轻松地将Map Display API添加到任何基于WordPress的网站。到目前为止，我们已经构建了基本的Plugin元素，这些元素允许插件出现在WordPress管理员界面和插件的管理面板界面中。此时，地图将显示在管理面板中。
在本文中，我们将：
- 设置数据库以保存商店位置数据。
- 添加一个界面，使管理员能够创建商店位置列表。
- 使用TomTom Search API的地理编码端点将商店地址转换为坐标。
- 在管理员映射中为商店位置添加标记。
创建商店数据库
我们有地图，但是没有数据可显示。对于此示例，我们将商店位置数据保存在本地SQL数据库中（并从中检索）。这是WordPress网站的常用选项。
首先，我们需要建立数据库表。用户激活插件时，以下命令将运行ttlocator_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和主键。
Map Display API使用纬度和经度坐标来显示地图上的兴趣点。我们已经在数据库中包含了纬度和经度字段，但是我们不会让用户自己找到这些数据。相反，我们将添加一个使用地址和TomTom Search API的功能，以自动查找纬度和经度。
＃将商店添加到地图
之前，您可能已经注意到对ttlocator_add_store_html（）的调用。此函数生成将用于添加新商店位置的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 Search API查找有关地址的信息。
如果找到该地址，它将显示在地图上。如果用户喜欢他们所看到的内容，他们将有机会将商店添加到他们的地图数据库中。
使用Search 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 Fuzzy Search API的查询。即使您的用户对输入的数据不准确，Fuzzy Search API仍然能够找到地址。例如，输入“ 1 Yonge St，Toronto”作为模糊搜索查询，即使您没有提供省，国家或邮政编码，也将找到正确的地址。如您在上面的调用中所看到的，我们使用TomTom Fuzzy Search 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（兴趣点）有关。
由于我们只需要地址信息，因此我们过滤结果以除去其他所有内容。如果找到地址，则会在地图上打开一个弹出窗口，以便用户确保新位置显示在正确的位置。
如果找不到地址，则会通知用户，以便他们可以尝试其他地址或添加有关他们输入的地址的更多信息。
将商店保存到数据库
由于我们使用户能够查找并保存商店位置，因此我们需要后端代码将商店添加到数据库中。
我们通过位于store-locator.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_strip_all_tags，以防止XSS攻击。
然后，我们使用一条准备好的语句将新的商店位置插入数据库中。最后，如果存储创建失败，我们将设置一个错误状态代码，以使调用者知道数据库插入失败。
在地图上渲染商店标记
现在，我们已经创建了管理页面，并向其中添加了地图，并且能够将商店保存在数据库中，在地图上显示商店非常容易。我们需要做的就是在每个商店的地图上添加一个标记。回想一下，我们已经通过将所有商店位置存储在storeLocations变量中来使它们对JavaScript可用。
从locator.js的第20行开始，您将看到以下代码：
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（）中，我们看到只需三行代码即可向地图添加标记。我们首先创建一个包含商店纬度和经度的数组。这是Leaflet在要求其创建地图标记时期望的坐标格式。
接下来，我们创建标记，并通过以下调用将其添加到地图中：
var marker = tomtom.L.marker(location).addTo(map);
然后，我们将弹出窗口绑定到标记。弹出窗口是地图用户单击代表商店位置的标记之一时将看到的气泡。通过在刚创建的标记上调用bindPopup（）来添加弹出窗口。我们传递给此函数的唯一参数是一个字符串，其中包含应该出现在标记内的HTML。
最后，我们将标记添加到markers数组中，以便需要与地图上的标记一起使用的任何其他函数可用。
回到我们的初始地图设置代码，我们看到以下内容：
var markerGroup = new tomtom.L.featureGroup(markers);
fitMapToMarkerGroup(markerGroup);
在这里，我们首先创建一个Leaflet FeatureGroup。这会将我们的标记归为一组，这使我们更容易根据所有地图标记的集体特征在地图上执行操作。
最后，我们调用fitMapToMarkerGroup（）：
map.fitBounds(markerGroup.getBounds().pad(0.2)); ,/pre>
如您所见，我们调用了地图的fitBounds方法，以礼貌地要求其适合标记组的边界。我们还添加了一些填充，以确保没有任何标记被地图的边缘截断。
下一步
在本文中，我们开始创建了插件功能，使站点管理员可以为网站配置商店地图，将商店添加到数据库并在地图上显示它们。
除了使用数据库存储数据外，还有其他方法，包括将存储数据硬编码为插件代码或将数据保存在单独的文件中。我们不会在本系列文章中介绍这些选项。但是请注意，无论选择哪种存储数据的方式，都需要提供地址信息以及纬度和经度坐标。
在下一篇文章中，我们将使用相同的工具来构建可插入公共网页的面向用户的地图小部件。该小部件将使用与Web资源相同的Maps SDK，并将从通过管理面板配置的商店数据库中提取其数据。
1. 本站资源转自互联网，源码资源分享仅供交流学习，下载后切勿用于商业用途，否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议，可自由转载、引用，但需署名原版权作者且注明文章出处
3. 未登录无法下载，登录使用金币下载所有资源。
IT小站 » WordPress + TomTom教程系列三：WordPress插件：将商店添加到地图
常见问题FAQ
- 没有金币/金币不足 怎么办？
- 本站已开通每日签到送金币，每日签到赠送五枚金币，金币可累积。
- 所有资源普通会员都能下载吗？
- 本站所有资源普通会员都可以下载，需要消耗金币下载的白金会员资源，通过每日签到，即可获取免费金币，金币可累积使用。
