2016-09-16 14 views
-1

Googleマップをウェブアプリケーションに実装する作業をしていて、PHP値をGoogleに渡すのに問題がありますMaps APIのJS関数PHP、JS、Google Maps API - 中心値を渡すときに空白のキャンバスを取得するPHP値

目標は、前のページのフォームからの入力をジオコーディング(Maps APIのジオコード関数を使用)して緯度と経度を抽出し、それらをバインドすることによって決定されるポイントを中心とするマップを持つことです後でマップJS関数に渡されるPHP変数に値を渡します。次のようにこれまでのところ、私のコードは次のとおりです。

<?php 

    $array_of_stuff = array_values(geocode($_SESSION['address'])); 

    $longitude = $array_of_stuff[0]; 
    $latitude = $array_of_stuff[1]; 
?> 

    echo '<div id="map"></div>'; 

?> 

<script> 

    function initMap() 
    { 
    var mapCanvas = document.getElementById("map"); 
    var mapOptions = 
    { 
     center: new google.maps.LatLng(parseFloat(<?php echo $latitude ?>), parseFloat(<?php echo $longitude ?>)), 
    zoom: 5 
}; 
    var map = new google.maps.Map(mapCanvas, mapOptions); 
    } 

</script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=Whatchalookingfor&callback=initMap"> 
</script> 

注目に値するいくつかのものは、まずあり、$ _SESSION [「アドレス」]変数は、マップの出力に、前のページにあるフォームから渡された変数であります上記のコードの元のページです。

第2に、セッション変数は、アプリケーションのすべてのページに含まれる関数ファイルに含まれているジオコード関数に渡されます。関数は基本的にgoogle mapsジオコードリンクを呼び出し、緯度と経度を含む配列を返します。次に、これをarray_values関数を使用して作業配列にバインドし、経度と緯度を別々の変数として抽出します。

これらの変数をマップを出力するinitMap()関数に渡す際に問題が発生します。私は、私は2番目にに取得するparseFloatは()アイデアをオフに左に、しかし、ここで私は、この時点までにしようとしているすべてのものです:

単に値をエコー

として作り

center: new google.maps.LatLng(<?php echo $latitude ?>, <?php echo $longitude ?>), 

で中央ではないlatLangオブジェクトではなく、ハード

center: {<?php echo $latitude ?>,<?php echo $longitude ?>}, 

のように値をコーディングそれから私はいくつかの読書を行うために開始し、いくつかのサイトは、解析フロート法を使用してreccomend。私はそれがまだそこに、このような事実

center: new google.maps.LatLng(parseFloat('12.345678'), ...) 

ようにPHPの値を持つparseFloatは()関数呼び出しを示してページのソースを表示したときに、私は数がであるようにそれはそう、すべての場合には、そのメソッドを使用してみましたが、 JSのソースコードは何らかの理由で正しく解析されません。

私のJSスキルはあまり鋭くないので、解析浮動小数点関数は単に数値を解析するか、関数宣言を表示する必要があるかどうかはわかりません。

私は、json_encode()を使って浮動小数点値を両方ともエンコードしようとしましたが、正しく呼び出すとまだ運がありませんでした。

私は固執していることは言うまでもありません。私はマップが生成されているように感じるので、左上隅に "地図"と "サテライト"ボタンが付いた茶色の空白のキャンバスを得ました。私はjavascriptのコンソールでクロムの警告を受け取っていないし、PHPエラーログに何のエラーも出ない。

ご協力いただきありがとうございます。

答えて

0

問題はlat/lng値の形式にあるようですが、google apiの検索ではなく、あらかじめ定義されたlat/lng値で使用すると次のコードが正常に機能するので、

<?php 
    /* 
    $a = array_values(geocode($_SESSION['address'])); 
    $longitude = $a[0]; 
    $latitude = $a[1]; 
    */ 

    /* For testing I used these coordinates */ 
    $latitude=52.4223005; 
    $longitude=-1.4876417; 

?> 

<!doctype html> 
<html> 
    <head> 
     <title>google maps app</title> 
     <script type='text/javascript' charset='utf-8'> 

      /* -- how do these appear in source code view? -- */ 
      <?php 
       echo " 
       var lat={$latitude}; 
       var lng={$longitude};"; 
      ?> 

      function initMap() { 
       var options = { 
        center: new google.maps.LatLng(lat.toFixed(10), lng.toFixed(10)), 
        zoom: 5 
       }; 
       var map = new google.maps.Map(document.getElementById('map'), options); 

      } 
     </script> 
     <script async defer src="https://maps.googleapis.com/maps/api/js?key=MyAPIKey&callback=initMap"></script> 
     <style type='text/css' charset='utf-8'> 
      #map{ 
       width:800px; 
       height:600px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="map"></div> 
    </body> 
</html> 
+0

Hey Ram。とても素早く私に戻ってくれてありがとう。要求されたように、私たちはあなたのコードブロックを実装しました。そして、ソースコードのように見えるのは、正しい方向のステップのように見える通常のフロートとしてキャストされます。 <!DOCTYPE HTML>ここでは、ビューのソースはGoogleマップアプリ <スクリプトタイプは、= 'テキスト/ javascriptの' 文字セットが= 'UTF-8'> 'code' ' をダンプ /*です - どのようにこれらはソースコードビューで表示されますか? - */ var lat = 52.4223005; var lng = -1.4876417; '@RamRaider – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">Ram!私は解決策を見つけた! Geocode APIは最初に緯度を返しますが、経度のように渡していました。一度私は2つの変数を切り替えマップは完全にロード!すべてのあなたの助けをありがとう、ちょうど答えが何だったか知りたいかもしれないと思った:) @RamRaider – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> <div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="1038284119" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="clearfix"> </div> <div class="relative-box"> <div class="relative">関連する問題</div> <ul class="relative_list"> <li> 1. <a href="http://ja.uwenku.com/question/p-buritmrp-hh.html" target="_blank" title="変数をアンドロイドからPHPに渡しているときに空白の後に値を取得しない"> 変数をアンドロイドからPHPに渡しているときに空白の後に値を取得しない </a> </li> <li> 2. <a href="http://ja.uwenku.com/question/p-ubgdlybl-mu.html" target="_blank" title="PHPでJS値を取得する"> PHPでJS値を取得する </a> </li> <li> 3. <a href="http://ja.uwenku.com/question/p-sxcmnlvb-eb.html" target="_blank" title="マーカーを中心に、Google maps api"> マーカーを中心に、Google maps api </a> </li> <li> 4. <a href="http://ja.uwenku.com/question/p-kelfajmc-kh.html" target="_blank" title="重力フォームエントリー値(PHPとAJAX)をGoogle Chart(JS)に渡す"> 重力フォームエントリー値(PHPとAJAX)をGoogle Chart(JS)に渡す </a> </li> <li> 5. <a href="http://ja.uwenku.com/question/p-dyloekkk-mt.html" target="_blank" title="Google Maps APIを使用してKMLの中心点を取得する方法"> Google Maps APIを使用してKMLの中心点を取得する方法 </a> </li> <li> 6. <a href="http://ja.uwenku.com/question/p-zdoivxlw-py.html" target="_blank" title="phpの値を.jsに渡す方法"> phpの値を.jsに渡す方法 </a> </li> <li> 7. <a href="http://ja.uwenku.com/question/p-rlfyzejs-cy.html" target="_blank" title="PHP:空白ページの取得"> PHP:空白ページの取得 </a> </li> <li> 8. <a href="http://ja.uwenku.com/question/p-qsxyydoh-du.html" target="_blank" title="Google Maps API v3(PHPとJavascript)"> Google Maps API v3(PHPとJavascript) </a> </li> <li> 9. <a href="http://ja.uwenku.com/question/p-bbyujhdn-or.html" target="_blank" title="div値を別のPHPに渡すと空白になりますか?"> div値を別のPHPに渡すと空白になりますか? </a> </li> <li> 10. <a href="http://ja.uwenku.com/question/p-rlgvblbj-ex.html" target="_blank" title="v2 android mapsのマップの中心を取得するには?"> v2 android mapsのマップの中心を取得するには? </a> </li> <div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-6208739752673518" data-ad-slot="4606349252"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <li> 11. <a href="http://ja.uwenku.com/question/p-dpjumjrf-dk.html" target="_blank" title="json値phpをjsに渡す方法"> json値phpをjsに渡す方法 </a> </li> <li> 12. <a href="http://ja.uwenku.com/question/p-kdemmwiu-bd.html" target="_blank" title="ポリゴンの中心Google Maps JavaScript API v3"> ポリゴンの中心Google Maps JavaScript API v3 </a> </li> <li> 13. <a href="http://ja.uwenku.com/question/p-elevizxc-bq.html" target="_blank" title="Google Maps API V3の地図を中心にズームする"> Google Maps API V3の地図を中心にズームする </a> </li> <li> 14. <a href="http://ja.uwenku.com/question/p-tvngtuur-gz.html" target="_blank" title="JSとPHPの隠しフィールドの値を取得する方法"> JSとPHPの隠しフィールドの値を取得する方法 </a> </li> <li> 15. <a href="http://ja.uwenku.com/question/p-afvoihis-od.html" target="_blank" title="PHPとMySQLを使用してルートを取得するGoogle Maps API"> PHPとMySQLを使用してルートを取得するGoogle Maps API </a> </li> <li> 16. <a href="http://ja.uwenku.com/question/p-zikxuhpz-or.html" target="_blank" title="php sql空白の値を挿入"> php sql空白の値を挿入 </a> </li> <li> 17. <a href="http://ja.uwenku.com/question/p-qsertdvw-dk.html" target="_blank" title="Googleマップ静的API - 中心座標でSWとNEを取得"> Googleマップ静的API - 中心座標でSWとNEを取得 </a> </li> <li> 18. <a href="http://ja.uwenku.com/question/p-hmpvyaet-oh.html" target="_blank" title="JSとPHPの値渡し問題"> JSとPHPの値渡し問題 </a> </li> <li> 19. <a href="http://ja.uwenku.com/question/p-ueilnsoy-mr.html" target="_blank" title="角度jsを使用してデータベースの空白値を取得"> 角度jsを使用してデータベースの空白値を取得 </a> </li> <li> 20. <a href="http://ja.uwenku.com/question/p-wxdmvoxu-pn.html" target="_blank" title="地図の中心を取得するJS google"> 地図の中心を取得するJS google </a> </li> <li> 21. <a href="http://ja.uwenku.com/question/p-qdkfzfbk-gc.html" target="_blank" title="Google Mapsでバウンディングボックスを取得するApi Js"> Google Mapsでバウンディングボックスを取得するApi Js </a> </li> <li> 22. <a href="http://ja.uwenku.com/question/p-flpndkmo-bs.html" target="_blank" title="PHPはGoogle Maps API V3内"> PHPはGoogle Maps API V3内 </a> </li> <li> 23. <a href="http://ja.uwenku.com/question/p-eavaegaa-nx.html" target="_blank" title="Google Maps Api Geocoder逆PHPリクエスト"> Google Maps Api Geocoder逆PHPリクエスト </a> </li> <li> 24. <a href="http://ja.uwenku.com/question/p-xtzjccij-et.html" target="_blank" title="Google Maps API V3のPHPの値に基づいて異なるマーカーを表示"> Google Maps API V3のPHPの値に基づいて異なるマーカーを表示 </a> </li> <li> 25. <a href="http://ja.uwenku.com/question/p-exggclqy-mq.html" target="_blank" title="ラジオボタンの空白値の取得"> ラジオボタンの空白値の取得 </a> </li> <li> 26. <a href="http://ja.uwenku.com/question/p-zkibbzge-de.html" target="_blank" title="Google Maps API - 街角を取得する"> Google Maps API - 街角を取得する </a> </li> <li> 27. <a href="http://ja.uwenku.com/question/p-tcnohygd-m.html" target="_blank" title="数値のPHPオブジェクトプロパティを取得する"> 数値のPHPオブジェクトプロパティを取得する </a> </li> <li> 28. <a href="http://ja.uwenku.com/question/p-seznsanx-nu.html" target="_blank" title="mapbox-gl-jsで地図の中心をキャンバスの中心にすることはできますか?"> mapbox-gl-jsで地図の中心をキャンバスの中心にすることはできますか? </a> </li> <li> 29. <a href="http://ja.uwenku.com/question/p-szaknvps-hp.html" target="_blank" title="Google Maps Directions APIからの値の取得JSON"> Google Maps Directions APIからの値の取得JSON </a> </li> <li> 30. <a href="http://ja.uwenku.com/question/p-tgsqibta-bn.html" target="_blank" title="Google Maps APIクエリからJSON値をPHP配列に割り当てる"> Google Maps APIクエリからJSON値をPHP配列に割り当てる </a> </li> </ul> </div> <div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-6208739752673518" data-ad-slot="1575177025"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="padding-top-10"></div> </div> </div> <script type="text/javascript" src="http://img.uwenku.com/uwenku/script/side.js?t=1644592048742"></script> <script type="text/javascript" src="http://img.uwenku.com/uwenku/plugin/highlight/highlight.pack.js"></script> <link href="http://img.uwenku.com/uwenku/plugin/highlight/styles/docco.css" media="screen" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $('pre').each(function(i, e) { hljs.highlightBlock(e, "<span class='indent'> </span>", false) }); </script> <div class="col-lg-3 col-md-4 col-sm-5"> <div id="rightTop"> <div class="row"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="5415218910" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="row sidebar panel panel-default"> <div class="panel-heading font-bold"> 最新の質問 </div> <div class="m-b-sm m-t-sm clearfix"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://ja.uwenku.com/question/p-knuztefn-nb.html" target="_blank" title="にconsole.logプリントがreactjs/mobxプロジェクトでは動作しません"> にconsole.logプリントがreactjs/mobxプロジェクトでは動作しません </a> </li> <li class="side_article_list_item"> 2. <a href="http://ja.uwenku.com/question/p-wtvqjrvi-mx.html" target="_blank" title="Nodejs HTTPSペイロードを構築する"> Nodejs HTTPSペイロードを構築する </a> </li> <li class="side_article_list_item"> 3. <a href="http://ja.uwenku.com/question/p-pjxaaiaf-mv.html" target="_blank" title="python3 sched:実行後のイベントのスケジュール"> python3 sched:実行後のイベントのスケジュール </a> </li> <li class="side_article_list_item"> 4. <a href="http://ja.uwenku.com/question/p-giwktnqb-na.html" target="_blank" title="TypeError:ヌルのプロパティ 'addEventListener'を読み取ることができません"> TypeError:ヌルのプロパティ 'addEventListener'を読み取ることができません </a> </li> <li class="side_article_list_item"> 5. <a href="http://ja.uwenku.com/question/p-bdaqgnfy-my.html" target="_blank" title="Googleスプレッドシートスクリプト - アドオン"> Googleスプレッドシートスクリプト - アドオン </a> </li> <li class="side_article_list_item"> 6. <a href="http://ja.uwenku.com/question/p-unhwmcug-ma.html" target="_blank" title="私のウェブサイトをhttpにするが、HSTSは問題を引き起こす"> 私のウェブサイトをhttpにするが、HSTSは問題を引き起こす </a> </li> <li class="side_article_list_item"> 7. <a href="http://ja.uwenku.com/question/p-qdhfedsz-mb.html" target="_blank" title="開始済みのサービスが既に実行されているかどうかを確認"> 開始済みのサービスが既に実行されているかどうかを確認 </a> </li> <li class="side_article_list_item"> 8. <a href="http://ja.uwenku.com/question/p-ppfxnpqy-kw.html" target="_blank" title="Google App EngineでPythonでhtml blobのアップロードをサニタイズする方法は?"> Google App EngineでPythonでhtml blobのアップロードをサニタイズする方法は? </a> </li> <li class="side_article_list_item"> 9. <a href="http://ja.uwenku.com/question/p-dtsnsvnb-ky.html" target="_blank" title="Windows 10にKerasをインストールできない"> Windows 10にKerasをインストールできない </a> </li> <li class="side_article_list_item"> 10. <a href="http://ja.uwenku.com/question/p-gtbjdczy-md.html" target="_blank" title="引数を引数として持つ関数を渡す方法"> 引数を引数として持つ関数を渡す方法 </a> </li> </ul> </div> </div> </div> <p class="article-nav-bar"></p> <div class="row sidebar article-nav"> <div class="row box_white visible-sm visible-md visible-lg margin-zero"> <div class="top"> <h3 class="title"><i class="glyphicon glyphicon-th-list"></i> 関連する問題</h3> </div> <div class="article-relative-content"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://ja.uwenku.com/question/p-buritmrp-hh.html" target="_blank" title="変数をアンドロイドからPHPに渡しているときに空白の後に値を取得しない"> 変数をアンドロイドからPHPに渡しているときに空白の後に値を取得しない </a> </li> <li class="side_article_list_item"> 2. <a href="http://ja.uwenku.com/question/p-ubgdlybl-mu.html" target="_blank" title="PHPでJS値を取得する"> PHPでJS値を取得する </a> </li> <li class="side_article_list_item"> 3. <a href="http://ja.uwenku.com/question/p-sxcmnlvb-eb.html" target="_blank" title="マーカーを中心に、Google maps api"> マーカーを中心に、Google maps api </a> </li> <li class="side_article_list_item"> 4. <a href="http://ja.uwenku.com/question/p-kelfajmc-kh.html" target="_blank" title="重力フォームエントリー値(PHPとAJAX)をGoogle Chart(JS)に渡す"> 重力フォームエントリー値(PHPとAJAX)をGoogle Chart(JS)に渡す </a> </li> <li class="side_article_list_item"> 5. <a href="http://ja.uwenku.com/question/p-dyloekkk-mt.html" target="_blank" title="Google Maps APIを使用してKMLの中心点を取得する方法"> Google Maps APIを使用してKMLの中心点を取得する方法 </a> </li> <li class="side_article_list_item"> 6. <a href="http://ja.uwenku.com/question/p-zdoivxlw-py.html" target="_blank" title="phpの値を.jsに渡す方法"> phpの値を.jsに渡す方法 </a> </li> <li class="side_article_list_item"> 7. <a href="http://ja.uwenku.com/question/p-rlfyzejs-cy.html" target="_blank" title="PHP:空白ページの取得"> PHP:空白ページの取得 </a> </li> <li class="side_article_list_item"> 8. <a href="http://ja.uwenku.com/question/p-qsxyydoh-du.html" target="_blank" title="Google Maps API v3(PHPとJavascript)"> Google Maps API v3(PHPとJavascript) </a> </li> <li class="side_article_list_item"> 9. <a href="http://ja.uwenku.com/question/p-bbyujhdn-or.html" target="_blank" title="div値を別のPHPに渡すと空白になりますか?"> div値を別のPHPに渡すと空白になりますか? </a> </li> <li class="side_article_list_item"> 10. <a href="http://ja.uwenku.com/question/p-rlgvblbj-ex.html" target="_blank" title="v2 android mapsのマップの中心を取得するには?"> v2 android mapsのマップの中心を取得するには? </a> </li> </ul> </div> </div> </div> </div> </div> </div> </div><!-- wrap end--> <!-- footer --> <footer id="footer"> <div class="bg-simple lt"> <div class="container"> <div class="row padder-v m-t"> <div class="col-xs-8"> <ul class="list-inline"> <li><a href="http://ja.uwenku.com/contact">お問い合わせ</a></li> <li>© 2020 JA.UWENKU.COM</li> <li><a target="_blank" href="https://beian.miit.gov.cn/">沪ICP备13005482号-4</a></li> <li><script type="text/javascript" src="https://v1.cnzz.com/z_stat.php?id=1280101193&web_id=1280101193"></script></li> <li><a href="http://www.uwenku.com/" target="_blank" title="优文库">简体中文</a></li> <li><a href="http://hk.uwenku.com/" target="_blank" title="優文庫">繁體中文</a></li> <li><a href="http://ru.uwenku.com/" target="_blank" title="поле вопросов и ответов">Русский</a></li> <li><a href="http://de.uwenku.com/" target="_blank" title="Frage - und - antwort - Park">Deutsch</a></li> <li><a href="http://es.uwenku.com/" target="_blank" title="Preguntas y respuestas">Español</a></li> <li><a href="http://hi.uwenku.com/" target="_blank" title="कार्यक्रम प्रश्न और उत्तर पार्क">हिन्दी</a></li> <li><a href="http://it.uwenku.com/" target="_blank" title="IL Programma di chiedere Park">Italiano</a></li> <li><a href="http://ja.uwenku.com/" target="_blank" title="プログラム問答園区">日本語</a></li> <li><a href="http://ko.uwenku.com/" target="_blank" title="프로그램 문답 단지">한국어</a></li> <li><a href="http://pl.uwenku.com/" target="_blank" title="program o park">Polski</a></li> <li><a href="http://tr.uwenku.com/" target="_blank" title="Program soru ve cevap parkı">Türkçe</a></li> <li><a href="http://vi.uwenku.com/" target="_blank" title="Đáp ứng viên">Tiếng Việt</a></li> <li><a href="http://fr.uwenku.com/" target="_blank" title="Programme interrogation Park">Française</a></li> </ul> </div> </div> </div> </div> </div> </footer> <!-- / footer --> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?f78a970f17b19a79fc477a3378096f29"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>