整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

波哥教你仿58同城网站实现城市自动切换

波哥教你仿58同城网站实现城市自动切换

昨天的分享中,波波为大家分享了通过IP定位到用户的城市,今天我们换一种方法来实现,根据用户城市不同,让网站自动切换不同的城市。

关于这个问题其实实现起来不复杂,不过波波思考了几天,原因在于上次分享内容用的是淘宝的api,而在淘宝的返回数据中城市只有汉字和citycode,所以使用起来尤其对于初学者极其不方便。所以我们这次使用高德地图的api。

高德地图API根据IP定位接口返回的数据中每个城市都有一个adcode,其实这个adcode是邮政编码,所以实现的话,我们首先给网站后台建立一个数据表,我们命名为citycode,表中需要至少两个字段,一个是邮政编码,一个是简称,比如"郑州",在数据库中存储数据为"zz",当然了大家可以随意定义,我这里只是为了讲解方便。

第一步,获取用户的IP地址,教程请参考《如何通过IP地址定位用户的位置》。

第二步,根据ip地址获取用户所在城市的邮政编码。源码如下:

/*高德地图IP定位*/

function IP2Location($ip,$para){

//高德的IP定位返回数据较少,如需详细定位信息可使用淘宝接口。

$str="output=json&ip=".$ip."&key=".$para;

$url="http://restapi.amap.com/v3/ip?".$str;

$content=file_get_contents($url);

$data=json_decode($content,true);

return $data;

}

需要说明的是函数IP2Location($ip,$para)中$para传的是你在高德开放平台申请的webService的key值。不是JSapi的那个接口哦,不然没有数据不要说波波代码有问题。

调用的时候只需要写一句:$location=IP2Location($ip,$key);就可以了。

第三步,查询数据库实现跳转。代码如下:

$row=$mysql->query("select * from `citycode` where `adcode`='{$location['adcode']}'limit 1");

if($row){

$url="http://".$row['简写的字段名'].".域名";

//拼接出来的网址类似http://zz.58.com,这里仅仅是举例,非特定58.请知悉

echo "<!--<script language='javascript' type='text/javascript'>";

echo "window.location.href='$url'";

echo "</script>-->";

}

通过上面的代码已经实现了根据用户IP地址自动切换网站城市的目的,但是如果仅仅这样并不完善,对于一个大型网站来讲代码开发还应该具备纠错功能。以上分享仅供交流学习。

多大型信息平台,如58同城,百姓网等都会有全国地区分站,比如我广州的,打开58同城会自动进入广州分站。

现在很多做网站的站长和网站建设公司都会采用pageadmin这类网站系统来建站,pageadmin是支持站群的,下面演示如何实现58同城的地区跳转功能。

1、首先需要一个iP识别接口,这里可以到阿里云去申请,我们也可以用淘宝的免费api接口,阿里云的接口返回信息格式如下。

{"code":0,"data":{"ip":"210.73.44.249","country":"中国","area":"","region":"广东","city":"广州","county":"XX","isp":"科技网","country_id":"CN","area_id":"","region_id":"440000","city_id":"440100","county_id":"xx","isp_id":"1000114"}}

下面我们通过ajax请求的方式来获取到归属信息实现跳转,代码如下:

<script type="text/javascript">
var clientIp="@StringHelper.GetClientIP()";//调用pageadmin的内置方法获取ip地址
var api="http://ip.taobao.com/service/getIpInfo.php";
$(function () {
 $.ajax({
 url: api,
 type: "GET",
 dataType: "json", //指定服务器返回的数据类型
 data: { ip: clientIp },
 success: function (ipData) {
 ipData=JSON.parse(ipData);
 var city=ipData.data.city;
 cityDomain(city) //调用城市判断函数
 }
 });
});
//城市判断函数
 function cityDomain(city) {
 var domain="www.58.com"; //换成自己的域名
 switch (city) {
 case "广州":
 domain="guangzhou.58.com";
 break;
 case "北京":
 domain="beijing.58.com";
 break;
 case "其他地区一一判断":
 //更多
 break;
 }
 location.href="domain";
}
</script>

域名跳转这部分可以在pageadmin的后台建一个分类表来实现,这样就可以实现后台控制,如下图:

添加一个自定义字段domain,这样就可以通过后台来控制地区和域名的对应,以后如果有变动直接通过后台修改即可,我这里添加了几条演示数据,效果如下。

通过点击添加和修改就可以实现地区和域名的后台控制,相比直接在模板中写死,是不是方便了很多。


者:Aaron

转发链接:https://segmentfault.com/a/1190000022781346