ajaxでphpに値を渡して出力したいのですが…
-
WPビギナーのBeatと申します。
質問させて下さい。Yahoo!が提供しているYOLP
（Yahoo! Open Local Platform）という地図に関するAPIを利用して、
現在地点からの目的地までの行き方を取得して表示しています。その際に目的地まで○○メートルと表示される値を、
jQueryのajax機能を使ってWP側に渡し、
その値を使って距離が近い順に入れ替え…
等を操作したいと考えています。まずYOLPから値を取得を完了した上で、
PHPで出力を開始することになると思うのですが、
そのような技術的に実現可能でしょうか。`
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no”>
<meta name=”apple-mobile-web-app-capable” content=”yes”>
<title>マクどこ</title>
<style type=”text/css”>
html, body, div{
margin:0; padding:0;
}
a{
color:#fff; font-weight:bold;
}
div#label{
z-index:2;
padding:8px;
overflow:hidden;
color: #fff;
background-color: #000;
background-image: -webkit-gradient(
linear,
0% 0%,
0% 100%,
from(rgba(155, 155, 155, 0.1)),
to(rgba(255, 255, 255, 0.5)),
color-stop(.5,rgba(155, 155, 155, 0.2)),
color-stop(.5,rgba(255, 255, 255, 0.1))
);
border-radius: 8px;
opacity: .7;
}
div#title{
font-size:14pt;
font-weight:bold;
line-height:1.2em;
width:100%;
overflow:hidden;
}
div#desc{
font-size:9pt;
font-weight:normal;
line-height:9pt;
overflow:hidden;
}
</style>
</head><body>
<div id=”container” style=”width:100%; height:100%; position:relative;”>
<div id=”map” style=”width:100%; height:100%;”></div>
<div id=”label” style=”position:absolute; bottom:4px; right:4px; width:92%; height:64px”>
<div id=”title”>マクどこ</div>
<div id=”desc”>always I’m lovin’it</div>
</div>
</div>
</body><script src=”http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=dj0zaiZpPXEyMkYzTjZqU0hvVSZkPVlXazlaWFpsWlROdk16QW1jR285TUEtLSZzPWNvbnN1bWVyc2VjcmV0Jng9YTI-“></script>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
<script>
jQuery(document).ready(function($){
//resize container
$(‘#container’).css({height: parseInt($(window).height(), 10)});//initialize map
var map = new Y.Map(“map”);
map.addControl(new Y.ZoomControl());
map.drawMap(new Y.LatLng(34.6812,135.2022), 14, Y.LayerSetId.NORMAL);//main
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(pos){
var latlng = new Y.LatLng(pos.coords.latitude,pos.coords.longitude);
searchNearestMcDonald(latlng);
});
}//search nearest McDonald
var searchNearestMcDonald = function(latlng){
$.ajax({
url: “http://search.olp.yahooapis.jp/OpenLocalPlatform/V1/localSearch”,
dataType: “jsonp”,
data:{
appid: “dj0zaiZpPXEyMkYzTjZqU0hvVSZkPVlXazlaWFpsWlROdk16QW1jR285TUEtLSZzPWNvbnN1bWVyc2VjcmV0Jng9YTI-“,
cid: “d115e2a62c8f28cb03a493dc407fa03f”,
results: 1,
lat: latlng.lat(),
lon: latlng.lng(),
sort: “dist”,
output: “json”
},
success: function(result){
updateRoute(latlng, result);
}
});
}//update Route
var plugin = null;
var updateRoute = function(latlng, result){
var coords = result.Feature[0].Geometry.Coordinates.split(“,”);
if(plugin){
map.removePlugin(plugin);
}
plugin = new Y.RouteSearchPlugin({latlngs:[
latlng,
new Y.LatLng(coords[1],coords[0])
]});
map.addPlugin(plugin);var name = result.Feature[0].Name;
var address = result.Feature[0].Property.Address;
var tel = result.Feature[0].Property.Tel1;
var simplename = name.replace(‘マクドナルド’,”);
var distance = (plugin.estimateDistance() * 1000) + ‘m’;
$(‘#title’).html(simplename + ‘(‘ + distance + ‘)’);
$(‘#desc’).html(address + ‘<br /><a href=”tel:’ + tel + ‘”>’ + tel + ‘</a>’);
}
});
</script>
</html>
`
サンプルソースは
最寄のマクドナルドの店名や行き方、距離を表示するソースです。こちらで出力される距離をWP側に渡し、
出力したいと考えています。自分的にはかなり難しい問題かと思うのですが、
分かるコードマスターな方がいらっしゃいましたら、
ご教示頂けると幸いです。
よろしくお願いします。
- トピック「ajaxでphpに値を渡して出力したいのですが…」には新たに返信することはできません。