1

イベント(カウンティショーなど)専用のページがある雑誌のウェブサイトを作成しています。このページの上部にはインタラクティブマップ(グーグルマップで作成)があり、次にさまざまなイベントとその詳細が記載されたセクションがあります。 3列のグリッドで。

上司は、Webサイトの所有者(ここでは編集者と呼びます)がイベントを追加するときに、イベントのアドレスを追加できるようにしたいと考えていました。エディターがイベントを保存すると、アドレスが地理的にコード化され、lat&lngが独自の非表示の入力フィールドに保存されます。

次に、Googleマップ構文内の[イベント]ページにループがあり、LatLngを使用して各イベントのマーカーを作成します。

マップを使用してページを作成しましたが、バックエンドで住所をジオコーディングする方法がわかりません。

投稿を保存するときにジオコーディングが自動的に行われるかどうか、またはボタンをクリックして手動で変換されるかどうかは関係ありません。ループから呼び出すことができるように、LatLngを保存する方法が必要です。

では、どうすればこれを行うことができますか?AJAXリクエストにjQueryが必要になることは理解していますが、これはどのファイルに入れる必要がありますか?(geocode.php

コードタイム!

Geocode.php:

$result = json_decode(file_get_contents($geoCodeURL), true); 

echo $result['results'][0]['geometry']['location']['lat'];
echo ',';
echo $result['results'][0]['geometry']['location']['lng'];

ええ...それが私が得たすべてです。

Functions.phpのスニペット

    <td>
        <form class="geocode" action="<?php bloginfo('template_url');?>/geocode.php" method="post">
        <input type="text" name="addr" />
        <input type="submit" value="" />
        </form>
        <input type="text" value="" name="eventLatLng" class="latlng" />
    </td>

PSこれが不明確な場合は非常に申し訳ありません。私は、AJAXを使用したことがなく、説明方法について少し混乱しているので、あまり助けにならなかった場合は申し訳ありません。

4

1 に答える 1

1

これがグーグルマップで住所を入力し、彼らの緯度と経度を取得するためのコードです。

 <!--code for google address api-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <input name="add" type="text" id="address" class="required" style="width: 500px;" onblur="cordinate()">
            <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
            <script>
                var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});

                google.maps.event.addListener(autocomplete, 'place_changed', function() {
                var place = autocomplete.getPlace();
                console.log(place.address_components);
                });
            </script>
            <!--code for google address api-->



            <!--code for google address cordinates By Harshal-->

            <script>

            function cordinate()
            {
                geocoder = new google.maps.Geocoder(); // creating a new geocode object

                address1 = document.getElementById("address").value;

                    if (geocoder)
                {
                geocoder.geocode( { 'address': address1}, function(results, status)
                {
                if (status == google.maps.GeocoderStatus.OK)
                {
                //location of first address (latitude + longitude)
                var location1 = results[0].geometry.location;
                document.getElementById("cor").value = location1;

                //alert(location1);
                } else
                {
                alert("Geocode was not successful for the following reason: " + status);
                }
                });

                }//end of If

            }
            </script>
            <!--code for google address cordinates-->
            <input type="hidden" name="cor" id="cor">//in this input field you will get the cordinates.
于 2012-10-12T14:47:21.197 に答える