我正在 WordPress 中创建一个软件（特别是作为插件），它执行以下操作；
- 有 2 个输入框，可运行 devBridge 自动完成到数据库位置表。（起点和终点）（它们通过 HTML 在简码函数中加载，因此通过简码显示）
- 具有生成地图的 Google Maps API 脚本。它会在这些选定位置之间生成 2 个标记，并在它们之间画一条线。
- 为了获取 Google 的位置，它会根据用户选择的位置从位置数据库中选择 lat 和 lng 值。即）用户选择米兰，MI，自动完成的onSelect将lat和lng值放入变量中。
- 该软件这样做是为了计算两个地点之间的距离，并使用它通过使用距离作为变量的公式计算价格。虽然，我不会完全解释其他部分，因为我只需要特定部分的帮助。
我有这样的位置表设置；
- id: int(5) - 位置的 id，即）1
- location: varchar(24) - 位置名称，即米兰，MI
- destGroup: varChar(24) - 目的地组的名称，即密歇根州底特律-安娜堡-弗林特
- lat: decimal(8,5) - 位置的纬度，即）39.776583
- lng: decimal(9,5) - 位置经度，即）-106.917459
我的代码：
HTML
/** -- Origin Search Function --
* Builds the Raw HTML for the input box that is needed to create the location live search tool. Used to build shortcode that displays the box and suggestions for the origin search tool.
**/
public function origin_search( $atts ) {
$orig = "<center><input type='text' id='origin' name='origin' style='color:#fff;background-color:#363636;padding-top:10px;padding-bottom:10px;padding-left:5px;padding-right:40px;border-width:1px;border-radius:5px' autocomplete='off'/></center>";
return $orig;
}
/** -- Destination Search Function --
* Builds the Raw HTML for the input box that is needed to create the location live search tool. Used to build shortcode that displays the box and suggestions for the destination search tool.
**/
public function destination_search( $atts ) {
$dest = "<center><input type='text' id='destination' name='destination' style='color:#fff;background-color:#363636;padding-top:10px;padding-bottom:10px;padding-left:5px;padding-right:40px;border-width:1px;border-radius:5px' autocomplete='off'/><div id='destination-suggest'></div></center>";
return $dest;
}
/** -- Map Display Function --
* Builds the Raw HTML for the map to display. Used to build shortcode that displays the map on the frontend.
**/
public function rail_map( $atts ) {
$map = "<div id='map' style='height:400px;width:600px'></div></br><div id='msg' style='visibility: hidden'></div>";
return $map;
}
//Registers all shortcode functions into WordPress to allow them to run.
public function register_shortcodes() {
add_shortcode( 'origin-search', array( $this, 'origin_search') );
add_shortcode( 'destination-search', array( $this, 'destination_search') );
add_shortcode( 'rail-map', array( $this, 'rail_map') );
}
PHP
include($_SERVER['DOCUMENT_ROOT'].'/wp-load.php');
require($_SERVER['DOCUMENT_ROOT']. '/wp-content/plugins/rail-rate-engine/includes/class-rail-rate-engine-pdo-config.php');
global $wpdb;
$query = isset($_GET['query']) ? $_GET['query'] : FALSE;
if ($query) {
// escape values passed to db to avoid sql-injection
$depts = $wpdb->get_results( "SELECT * FROM locations WHERE location LIKE '".$query."%' ORDER BY location ASC LIMIT 0,10" );
$suggestions = array();
$data = array();
$destGroup = array();
$lat = array();
$lng = array();
foreach($depts as $row) {
$suggestions[] = $row->location;
$data[] = $row->id;
$destGroup[] = $row->destGroup
$lat[] = $row->lat;
$lng[] = $row->lng;
}
$response = array(
'query' => $query,
'suggestions' => $suggestions,
'data' => $data,
'destGroup' => $destGroup,
'lat' => $lat,
'lng' => $lng,
);
echo json_encode($response);
}
JS
jQuery(document).ready(function($) {
$('#origin').autocomplete({
// add the way to the file with database query
noCache: false,
preventBadQueries: true,
minChars: 0,
serviceUrl: '/wp-content/plugins/rail-rate-engine/includes/class-rail-rate-engine-location.php',
// callback function:
onSelect: function(value, data){
var orglocation = value;
var orgid = data;
var olat = lat;
var olng = lng;
},
});
$('#destination').autocomplete({
// add the way to the file with database query
noCache: false,
preventBadQueries: true,
minChars: 0,
serviceUrl: '/wp-content/plugins/rail-rate-engine/includes/class-rail-rate-engine-location.php',
// callback function:
onSelect: function(value, data){
var destlocation = value;
var destid = data;
var destgroup = destGroup;
var dlat = lat;
var dlng = lng;
},
});
});
谷歌地图
var map;
function initMap() {
var olat = olat;
var olng = olng;
var dlat = dlat;
var dlng = dlng;
// The map, centered on The Geographic Center of the United States.
const center = {lat: 39.8283459, lng: -98.5794797};
const options = {zoom: 15, scaleControl: true, center: center};
map = new google.maps.Map(
document.getElementById('map'), options);
// Locations of landmarks
const orig = {lat: olat, lng: olng};
const dest = {lat: dlat, lng: dlng};
// The markers for origin and destination.
var mk1 = new google.maps.Marker({position: orig, map: map});
var mk2 = new google.maps.Marker({position: dest, map: map});
}
WP 入队脚本
wp_enqueue_script( $this->rail_rate_engine, plugin_dir_url( __FILE__ ) . 'js/rail-rate-engine-public.js', array( 'jquery' ), $this->version, false );
wp_enqueue_script('jquery', false, array('jquery')); //Because it ships with WordPress
wp_enqueue_script( 'jquery-ui', false, array('jquery'));
wp_enqueue_script('autocomplete', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.26/jquery.autocomplete.js',array( 'jquery' ));
wp_enqueue_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?&key=AIzaSyAf2-e6S3Gj275e_FVTDjp9kFn-iMElNSc&callback=initMap', array(), '', true);
wp_enqueue_script( $this->rail_rate_engine, plugin_dir_url( __FILE__ ) . 'js/class-rail-rate-engine-map.js', array( 'jquery' ), $this->version, false );
问题：我需要帮助来获取自动完成以存储变量。我不知道获取 php 输出（即 JSON 响应）以在 lat 和 lng 响应中包含一个额外列的正确方法，因此我可以让自动完成功能读取它并将其存储为变量，这样我就可以将它用于谷歌地图 API。我在上面的代码中进行了尝试，但显然它不起作用并且会产生错误。
如果有人知道将这些额外的数据库列值作为保存变量通过自动完成 onSelect 函数传递的正确方法，我将不胜感激！
提前致谢。