description: 

在页面中加入jQuery内容获取google地图的信息

 
大家好，我是Lester，这是我第二次写教程，依然希望大家捧场，请掌声鼓励！（台下一片沉默……）
 
咳咳……好，谢谢大家的掌声，今天我们将要继续上次的内容。上次我们用一个Drupal页面实现了访问google地图并且返回指定地址的经纬度，但只是以drupal_set_message的形式把返回值显示出来，这样离我们的目的相去甚远——我们的口号是，向google看齐，很好很强大很牛逼！！！
 
所以呢，今天我们的目标就是，在上一次的内容里加上jQuery的元素，使页面丰富起来。
 
 
我们这次将用户所填写的内容详细分成国家，城市，地址三个部分，然后再额外的在地址一栏的下面给出一个按钮，用来点击获得经纬度，再把经纬度自动填写到下面的经度和纬度两个文本框内。
 
首先要做的就是表单的细化，只要对上次定义的表单进行修改就行，代码如下，其中黑体的部分表示添加或修改的内容：
 
function geoinfo_addressform() {
          $form['country'] = array(
             '#title' => t('Country'),
             '#type' => 'textfield',
             '#description' => t('which Country you are in?')
          );
         
          $form['city'] = array(
             '#title' => t('City'),
             '#type' => 'textfield',
             '#description' => t('please enter the name of your city')
          );
         
          $form['address'] = array(
             '#title' => t('address'),
             '#type' => 'textfield',
              '#description' => t('please enter your address'),
    '#suffix' => '<span><input type="button" id="geobutton" value="get the geoinfo"/></span>',
          );
         
          $form['latitude'] = array(
             '#title' => t('latitude'),
             '#type' => 'textfield',
          );
         
          $form['longitude'] = array(
             '#title' => t('longitude'),
             '#type' => 'textfield',
          );
         
          $form['submit'] = array(
           '#type' => 'submit',
           '#value' => t('send'),
          );
          return $form;
}
 
没什么新鲜的，还是基本的表单，不会的继续为www.drupalbar.com贡献点击，去看我们翻译的文献，嘿嘿。
 
唯一要注意的是'#suffix' 的使用，其意义是在表单元素的后面追加html代码，这里我们是用它来在address的后面附上了一个按钮，以便稍后点击触发jQuery事件，获取google地图的数据。
 
修改后的表单如下图：
 

            图3 添加了详细分类和新按钮的表单
 
然后就是在表单中加入jQuery代码，实现在点击get the geoinfo的时候，把country,city,address的值组合一下放进google地图的那个网址中去获取经纬度。这位jQuery很高段的同学觉得很简单？那你自己尝试一下？
 
 
 
 
 
 
怎么样？不行？在试试，别气馁，还是不行？
嘿嘿嘿，哈哈哈，要是直接写上jQuery语句去访问google就行的话，我还站在这有什么用啊？您说是吧。
 
直接用jQuery不行的原因是：使用jQuery实现的Ajax有一个很大的局限性，那就是，不能跨域访问。说的直白一点，就是Ajax只能从你自己的服务器上获取信息，比如你是localhost，那它就无法去访问google。这是从安全性上考虑所做的限制，但现在却使我们感到很不方便。
 
那么该怎么做才能顺利的访问google地图呢？
 
咱们这一群活人自然不能让尿憋死，直接访问不行我们可以间接的来嘛。
 
还记得我们上次我们使用的drupal_http_request()函数么？这说明Drupal是可以顺利访问google地图的，那么，Drupal访问了之后，不就是把google地图的数据拿回到本地了么？
 
所以我们的做法就是：建立一个新的页面，起到一个中转站的作用，此页面从geoinfo_page上的jQuery语句获得用户填写的信息，组合整理后访问google地图，获得经纬度，再把此数据返回给geoinfo_page的jQuery语句，自动填写到latitude和longitude栏中。
 
而这一切动作，都是从用户点击get the geoinfo按钮开始。
 
我们先来实现这个中转页面，在模块中增加以下内容，首先是hook menu中增加一个路径：
 
function geoinfo_menu() {
          $items['admin/geoinfo'] =array(
             'title' =>'geography infomation',
             'page callback' => 'geoinfo_page',
             'access arguments' =>array('access content'),
             'type' => MENU_CALLBACK,
          );
         
          $items['admin/geoinfo/collectter'] =array(
              'title' => 'get infomation for the geoinfo page ',
              'page callback' => 'geoinfo_collectter',
              'access arguments' =>array('access content'),
              'type' => MENU_CALLBACK,
          );
          return $items;
}
 
然后是定义新路径的call back函数geoinfo_collectter：
 
function geoinfo_collector() {
$gmapaddress = urlencode($_POST['address']);
    $url ='http://maps.google.com/maps/geo?q='.$gmapaddress.'&output=csv&key=abcdefg';
$result = drupal_http_request($url);
echo "$result->data";
}
 
这里$_POST['address']的作用是获得geoinfo页面传递过来的参数，注意参数名的一致性，而这回我们用的是urlencode()函数来将字符串整理成适合写在url中的格式（怎么样，这回没人说我只会正则了吧）。然后访问google地图，用的还是drupal_http_request。最后是把返回值的数据内容打印在页面上，方便一会geoinfo页面的jQuery语句过来获取。
 
再就是需要在geoinfo_form函数中添加的jQuery代码，这样生成表单的同时也就把jQuery语句写了进去：
 
          drupal_add_js("
           $(document).ready(function() {
           $('#geobutton').click(function() {
           var addressstr = $('#edit-country').val()+$('#edit-city').val()+$('#edit-address').val();
           var url = 'http://localhost/drupalbar/admin/geoinfo/collector';
           $.post(url,{'address':addressstr},function(data){
           var latitude = data.split(',')[2];
           var longitude = data.split(',')[3];
           $('#edit-latitude').val(latitude);
           $('#edit-longitude').val(longitude);
        });
      });
    });
    ","inline");
 
语句也很简单，刚才那位擅长jQuery的同学你来讲一下。什么？你说如果你来讲要我有什么用？靠，给你表现的机会你竟然不要，那好，还是我来讲解吧。
 
先使用新添加的按钮的id——geobutton来选中这个按钮，然后使用click方法使得当按钮被点击的时候进行如下动作：
 
1定义addressstr变量，把用户填写的几个字段连起来
2定义url变量，这是我们刚才建立的中转页面的地址
3用$.post方法把地址信息传给中转页面，并把google返回的信息拿回来进行处理。因为信息返回的是4个以逗号分割的数字，后两个才是经纬度。所以使用split方法从中获取需要的数值，然后填充到对应的文本框中。
 
ok，大功告成，输入几个地址检验一下：
 

            图4 修改后的页面
 
看见表单上面那行绿色字体了么？翻译成中文是：缓存已被清空。当我们对hook menu的相关内容进行了修改之后，一定要及时的清空缓存，否则会看不到改变的内容，让你以为自己哪里的代码写错了，从而挠头不已。你问我为啥知道的这么清楚？那是因为我……咳咳，那是因为我作为一个资深的教程作者，自然知道同学们容易范的错误，哈哈哈。
 
好了，我们需要的功能都实现了，你说内容太简单？那请继续跟随john师傅的高级教程学习。你说页面还是不够cool？那自己研究研究css吧？你说为啥改变了表单不去修改validate和submit函数？那是你的家庭作业，不会的继续贡献点击量。
 
好了，今天的课程就到这里，我们下次再见。
from :   http://www.drupalbar.com/node/102