使用AJAX对Wordpress Admin控制面板上的地址进行地址编码

Question

我正在为杂志创建一个网站，该网站的页面专门讨论事件（例如县节目等）。该页面的顶部有一个交互式地图（使用Google地图构建），然后是一个包含不同事件及其详细信息的部分在3col网格中。

我的老板想拥有它，以便在网站所有者（我们将其称为编辑器）添加事件时，他们可以添加事件的地址。 当编辑器保存事件时，它将对地址进行地理编码，然后将经纬度保存到其自己的隐藏输入字段中。

然后，Google Maps语法中的“事件”页面上会出现一个循环，以使用其LatLng为每个事件创建标记。

我已经用地图创建了页面，但是我不知道如何对后端的地址进行地理编码。

我不介意在保存帖子时是否自动进行地理编码，或者是否通过单击按钮手动将其转换。 我只需要一种保存LatLng的方法，以便可以从循环中调用它。

那我该怎么做呢？ 我了解我将需要一些jQuery来处理AJAX请求，但是应该将其放入哪个文件？ （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一起工作过，我对如何解释它感到有些困惑，如果没有太多帮助，我们感到抱歉。

Answer 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.