サポート » 使い方全般 » ajaxでphpに値を渡して出力したいのですが…

  • Beat

    (@kitakaru)


    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&gt;
    <script src=”http://code.jquery.com/jquery-latest.js”></script&gt;
    <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&#8221;,
    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に値を渡して出力したいのですが…」には新たに返信することはできません。