根据K2字段值自动定位地图位置

如果你的文章栏目的文章,是包含不同的地理位置信息,那么你是否有考虑过根据文章的地理位置信息(字段值)自动显示所在位置呢?

下面我们就用百度地图为例子,实现根据字段值直接显示地图。

一、使用百度地图API(反地址解释)

新版网址: http://developer.baidu.com/map/jsdemo-mobile.htm#i7_2

因为新版要申请API,下面就直接用旧版来实现

二、在模板中引用的部分包括:

1、API文件调用

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>

2、代码应用

<script type="text/javascript">
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint("你希望显示的位置", function(point){
if (point) {
map.centerAndZoom(point, 16);
map.addOverlay(new BMap.Marker(point));
}
}, "北京市");
</script>

三、修改应用代码

例如你的k2字段的名称是“地址”,别名是dizhi

那么在模板中引用的可以使用php语句

<?php echo $this->item->extraFields->dizhi->value ; ?>

然后我们可以加入地图代码

<script type="text/javascript">
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint("<?php echo $this->item->extraFields->dizhi->value ; ?>", function(point){
if (point) {
map.centerAndZoom(point, 16);
map.addOverlay(new BMap.Marker(point));
}
}, "北京市");
</script>

这样地图就会自动根据“地址”的值来显示当前的地图。

以上代码中的Point(116.331398,39.897445) 和 "北京市" 都是范围值,可以根据你的实际情况指定,获取的反地址解释会更精准

栏目列表

Joomla关于Joomla教程、Joomla模板

K2关于K2教程、K2文档翻译、K2扩展介绍

SEO关于SEO资讯、SEO技巧、Joomla SEO

网页设计关于PHP、CSS、HTML、Javascript

网站服务器关于服务器知识、服务器安全

本站文章版权说明

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载本站内容必须也遵循“署名-非商业用途-保持一致”的创作共用协议.
This site is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.