使用AJAX在Wordpress管理控制面板上进行地理编码地址

时间:2012-10-12 14:11:25

标签: php jquery ajax wordpress google-maps

我正在为杂志创建一个网站,其中有一个专门用于活动的页面(例如县展览等)。此页面顶部有一个交互式地图(用谷歌地图构建),然后是一个包含不同活动的部分以及他们在3col网格中的细节。

我的老板希望拥有它,以便当网站所有者(我们将其称为编辑者)添加事件时,他们可以添加事件的地址。当编辑器保存事件时,它会对地址进行地理编码,并将lat& lng保存到自己的隐藏输入字段中。

Google地图语法中的“事件”页面上有一个循环,可以使用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>

P.S。我很抱歉,如果不清楚,我从未使用过AJAX,我对如何解释它感到有点困惑,很抱歉,如果我没有多大帮助。

1 个答案:

答案 0 :(得分:1)

以下是通过谷歌地图输入地址并获取他们的lat&amp;长。

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