Drupal中文社区
cck和gmap配合的简单例子
大家好，我是Lester。
这次要和大家共同学习的内容是：如何使用cck和gmap模块相配合，为node输出一个地图字段。
这两个模块的安装我就不说了，cck也算是建站必备模块之一了，而gmap大家可以参照我们网站的相关教程进行安装设置，所以我们默认的环境是已经有了一个装好cck模块的网站，并且成功设定了一个名为gmap的输入方式（Input format）。所以，让我们直接从给page添加一个gmap字段开始。
流程如下：
1 使用cck为page添加一个text字段，比如我们添加一个名为gmap的字段，如下图
图1 添加一个新的text字段
这里记得要选textarea作为输入方式，然后点击save进入字段的进一步设定页面。
2 设定的时候要注意的只有一点，将text processing选项选成 filtered text，如下图
图2 选择filtered text作为文本的处理方式
3 点击save之后，再次进入这个字段的设定页面（点击Configure），这次的目标是Default value。点击展开后，我们把input format 选为 gmap。
其实以上过程可以概括为一句话：所谓的gmap字段，其实就是一个input format为gmap的textarea字段！
那么在这个字段中输入什么内容才能让它变成一副地图呢？
当安装了gmap模块之后，admin菜单中会多出这么一项：“Build a GMap macro”。我们进去之后会发现，随着我们输入不同的地址和参数去影响表单顶部的地图，表单底部的Macro text的内容会随之变化。而反过来，这个Macro text的内容也就决定了输出的地图是个什么样子。例如：
[gmap markers=small red::40.03246137517224,0.019698143005371094 |zoom=14 |center=40.03510650774659,0.018367767333984375 |width=400px |height=300px |control=Large |type=Map]
这是一个简单的Macro text，参照http://www.drupalbar.com/node/86 的内容可以很容易知道这段文本中各个参数的作用。这里简单的说一下：
markers：顾名思义，就是用参数定义了地图上的标记。具体的定义方式是：
markers=标记类型：：标记1经度，标记1纬度：标记1上显示的文本信息+标记2经度，标记2纬度：标记2上显示的文本信息……+标记n经度，标记n纬度：标记n上显示的文本信息
zoom：就是地图展开的时候默认的缩放等级。
center：后面跟着的经纬度就是地图展开的时候默认的中心点经纬度。
width和height：不用说了，地图的宽度和高度。
control：地图的操控部件的类型，就是那个包含了缩放等级和比例尺的东东。
type：地图的显示类型，比如卫星图，地理图之类的。
这几个参数之间用“|”隔开。
于是，我们联系前面几个gmap的教程内容，再配合cck，就可以做到如下功能。
创建一个名为user address的cotent type，含有name，address，gmap三个字段，而第三个gmap字段我们用jquery把它隐藏起来，并不让用户填写。如下图：
图3 带有3个自定义字段的user address
图4 用户填写表单的页面 gmap字段已经被隐藏了起来
这样当用户创建一个user address的时候，他将输入名字和地址，我们就可以通过这个地址按照前几讲的方法获取经纬度，然后用经纬度和用户的名字来写一个Macro text，最后hook到这个表单的提交过程中，将这个Macro text赋值给gmap字段，那么当用户填写表单结束之后，就会发现一副标出了他的名字和地址的地图已经添加在这个node之中了。
这里贴一段简单的代码仅供参考:
使用form_alter在表单的提交函数中增加函数user_address_submit(&$form,&$form_state)
function user_address_form_user_address_node_form_alter(&$form,$form_state) {
//隐藏gmap字段
drupal_add_js("
$(document).ready(function() {
$('#edit-field-map-0-value-wrapper').hide();
});
","inline");
//指定sunmit函数
$form['#submit'][] = 'user_address_submit';
}
然后按照如下方式定义函数
function user_address_submit(&$form,&$form_state) {
$name = $form_state['values']['field_name']['0']['value'];//获得name的值
$address = $form_state['values']['field_address']['0']['value'];//获得address的值
$url =urlencode($address);//将address转化为适合url的格式
$url =
'http://maps.google.com/maps/geo?q='.$url.'&output=csv&key=abcdefg';//拼凑一个用于访问取得经纬度的地址。
$point=drupal_http_request($url);//访问google，取得经纬度
$str_array=explode(',',$point->data);//分析google的返回值
$point_latitude = $str_array[2]; //在返回值中取出经度
$point_longitude = $str_array[3];//在返回值中取出纬度
//拼凑gmap macro并将它赋值给field_字段
$form_state['values']['field_map']['0']['value']='[gmap markers=blue::'.$point_latitude.','.$point_longitude.':<ul><li>'.name.'</li><li>'.$address.'</li></ul>|zoom=12 |center='.$point_latitude.','.$point_longitude.' |width=300px |height=200px |control=Large |type=Map]';
}
这样用户在每次建立或者修改user address内容的时候，就可以自动的根据用户填写的name和address内容自动生成一个带有标记的地图了。
效果如下图：
图5 带有gmap的node
Notice：标记上的文本写在gmap macro text中的时候是以html代码的形式出现的，这让你可以很容易的直接改写文本内容的结构，这里要注意的是“|”和“：”都会导致文本内容的结束，所以要对其进行转义
图1 添加一个新的text字段
这里记得要选textarea作为输入方式，然后点击save进入字段的进一步设定页面。
2 设定的时候要注意的只有一点，将text processing选项选成 filtered text，如下图
图2 选择filtered text作为文本的处理方式
3 点击save之后，再次进入这个字段的设定页面（点击Configure），这次的目标是Default value。点击展开后，我们把input format 选为 gmap。
其实以上过程可以概括为一句话：所谓的gmap字段，其实就是一个input format为gmap的textarea字段！
那么在这个字段中输入什么内容才能让它变成一副地图呢？
当安装了gmap模块之后，admin菜单中会多出这么一项：“Build a GMap macro”。我们进去之后会发现，随着我们输入不同的地址和参数去影响表单顶部的地图，表单底部的Macro text的内容会随之变化。而反过来，这个Macro text的内容也就决定了输出的地图是个什么样子。例如：
[gmap markers=small red::40.03246137517224,0.019698143005371094 |zoom=14 |center=40.03510650774659,0.018367767333984375 |width=400px |height=300px |control=Large |type=Map]
这是一个简单的Macro text，参照http://www.drupalbar.com/node/86 的内容可以很容易知道这段文本中各个参数的作用。这里简单的说一下：
markers：顾名思义，就是用参数定义了地图上的标记。具体的定义方式是：
markers=标记类型：：标记1经度，标记1纬度：标记1上显示的文本信息+标记2经度，标记2纬度：标记2上显示的文本信息……+标记n经度，标记n纬度：标记n上显示的文本信息
zoom：就是地图展开的时候默认的缩放等级。
center：后面跟着的经纬度就是地图展开的时候默认的中心点经纬度。
width和height：不用说了，地图的宽度和高度。
control：地图的操控部件的类型，就是那个包含了缩放等级和比例尺的东东。
type：地图的显示类型，比如卫星图，地理图之类的。
这几个参数之间用“|”隔开。
于是，我们联系前面几个gmap的教程内容，再配合cck，就可以做到如下功能。
创建一个名为user address的cotent type，含有name，address，gmap三个字段，而第三个gmap字段我们用jquery把它隐藏起来，并不让用户填写。如下图：
图3 带有3个自定义字段的user address
图4 用户填写表单的页面 gmap字段已经被隐藏了起来
这样当用户创建一个user address的时候，他将输入名字和地址，我们就可以通过这个地址按照前几讲的方法获取经纬度，然后用经纬度和用户的名字来写一个Macro text，最后hook到这个表单的提交过程中，将这个Macro text赋值给gmap字段，那么当用户填写表单结束之后，就会发现一副标出了他的名字和地址的地图已经添加在这个node之中了。
这里贴一段简单的代码仅供参考:
使用form_alter在表单的提交函数中增加函数user_address_submit(&$form,&$form_state)
function user_address_form_user_address_node_form_alter(&$form,$form_state) {
//隐藏gmap字段
drupal_add_js("
$(document).ready(function() {
$('#edit-field-map-0-value-wrapper').hide();
});
","inline");
//指定sunmit函数
$form['#submit'][] = 'user_address_submit';
}
然后按照如下方式定义函数
function user_address_submit(&$form,&$form_state) {
$name = $form_state['values']['field_name']['0']['value'];//获得name的值
$address = $form_state['values']['field_address']['0']['value'];//获得address的值
$url =urlencode($address);//将address转化为适合url的格式
$url =
'http://maps.google.com/maps/geo?q='.$url.'&output=csv&key=abcdefg';//拼凑一个用于访问取得经纬度的地址。
$point=drupal_http_request($url);//访问google，取得经纬度
$str_array=explode(',',$point->data);//分析google的返回值
$point_latitude = $str_array[2]; //在返回值中取出经度
$point_longitude = $str_array[3];//在返回值中取出纬度
//拼凑gmap macro并将它赋值给field_字段
$form_state['values']['field_map']['0']['value']='[gmap markers=blue::'.$point_latitude.','.$point_longitude.':<ul><li>'.name.'</li><li>'.$address.'</li></ul>|zoom=12 |center='.$point_latitude.','.$point_longitude.' |width=300px |height=200px |control=Large |type=Map]';
}
这样用户在每次建立或者修改user address内容的时候，就可以自动的根据用户填写的name和address内容自动生成一个带有标记的地图了。
效果如下图：
图5 带有gmap的node
Notice：标记上的文本写在gmap macro text中的时候是以html代码的形式出现的，这让你可以很容易的直接改写文本内容的结构，这里要注意的是“|”和“：”都会导致文本内容的结束，所以要对其进行转义
原文地址：http://www.drupalbar.com/node/127
文章分类
标签