|
大家好，我是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] 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代码的形式出现的，这让你可以很容易的直接改写文本内容的结构，这里要注意的是“|”和“：”都会导致文本内容的结束，所以要对其进行转义
| 
发表于 2-1-2012 22:06
