很喜欢博客园可以自定义代码的风格，今天在装饰自己的公告时候突然想加个地图来显示游客的当前位置，想到做到，那就自己动手做一下，
地图：谷歌地图jsV3版 先看演示：演示地址：http://www.cnblogs.com/phphuaibei/右面的公告处地图
设计思路：根据游客的ip信息获得地理信息，进而查询地图，再次显示游客的当前地址
第一步获得游客的ip信息
由于公告只能加html代码，肯定不可以使用服务端程序来获取到游客的ip，那就只能通过js方式获得游客的ip，第一个想法就是使用
腾讯的ip开放接口：可以获得一个数组信息
1 |
<script language="javascript" type="text/javascript" src="http://fw.qq.com/ipaddress"></script> |
2 |
<script>document.write("你的IP是："+IPData[0]+"，来自："+IPData[2]);</script> |
但是放在博客园公告上面却不能显示，原因是这个数组是gbk编码的，而博客园是utf8格式，想自己转码，但是嫌麻烦
我又想到新浪的一个ip接口，这个接口返回的是json格式的数据
1 |
<script language="javascript" type="text/javascript" src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js"></script> |
2 |
<script type="text/javascript">document.write("欢迎来自："+remote_ip_info.country+remote_ip_info.province+remote_ip_info.city+"的朋友！"); |
3 |
4 |
</script> |
这个接口的数据是utf8格式，正合适，下面就是用这个接口获得ip信息,备注：ip本来就是一个粗略的估算，再说影响获得你ip的接口因素有很多，最终ip信息的准确还要看新浪的ip接口，个人感觉腾讯的ip接口比较精确可用到县一级，新浪的ip接口只能到市一级！腾讯ip需要转utf8格式，你可以试试看
这里可以参考我的另外一个博客：获得ip地理信息的几种方法【最全】
第二根据谷歌地图查询游客位置
<!--调用谷歌地图js，zoom缩放倍数，center中心，mapTypeId地图类型--> |
<script type="text/javascript" src="http://ditu.google.com/maps/api/js?sensor=true"></script> |
设置谷歌地图的参数
zoom是地图显示的缩放级数，center是地图的中心位置，maptypeid是地图的类型，address主要获取查询到的地理信息，
gecode主要是谷歌地图吧地理信息转化为经度纬度值，title主要是点击时候的名称，icon主要是锚点的背景图像，没有的话就是是默认值,没有找到合适的图片这里我没有开启
这个在我另外一个博客也有详细说明：基于ip的手机地理定位
<script language="javascript"> |
var geocoder; |
var map; |
function initialize() { |
geocoder = new google.maps.Geocoder(); |
var latlng = new google.maps.LatLng(39.9493, 116.3975); |
var myOptions = { |
zoom: 15, |
center: latlng, |
mapTypeId: google.maps.MapTypeId.ROADMAP |
} |
var address = remote_ip_info.country+remote_ip_info.province+remote_ip_info.city; |
document.getElementById('add').innerHTML = "欢迎来自："+address+"的朋友！"; |
var img='http://avatar.csdn.net/B/9/A/1_youacai.jpg'; |
|
if (geocoder) { |
geocoder.geocode( { 'address': address}, function(results, status) { |
if (status == google.maps.GeocoderStatus.OK) { |
map.setCenter(results[0].geometry.location); |
var marker = new google.maps.Marker({ |
map: map, |
position: results[0].geometry.location, |
title:'位置', |
// icon:img |
|
}); |
|
} |
}); |
} |
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); |
} |
|
</script> |
最后放置谷歌地图的容器
<body onload="initialize()"> |
<div id="add" style=" height:26px;color:#F00;font-size: 18pt;"></div> |
|
<div id="map_canvas" style="width: 380px; height: 280px;"></div> |
下面大家预览一下效果：演示地址：http://www.cnblogs.com/phphuaibei/右面的公告处。呵呵 ，由于博客园公告不支持谷歌的信息窗口弹出和监听事件，所以只是做一个简单的显示游客的位置的统计！欢迎各位拍砖留言如果有好的建议也希望和你一起交流！我的博客公告有演示，可以看一下，如果有什么bug，也欢迎及时告诉我！
完整代码：把它加到自己的公告里面就可以了，演示地址：http://www.cnblogs.com/phphuaibei/右面的公告处
<script language="javascript" type="text/javascript" src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js"></script> |
02 |
03 |
<!--调用谷歌地图js，zoom缩放倍数，center中心，mapTypeId地图类型--> |
04 |
<script type="text/javascript" src="http://ditu.google.com/maps/api/js?sensor=true"></script> |
05 |
<script language="javascript"> |
06 |
var geocoder; |
07 |
var map; |
08 |
function initialize() { |
09 |
geocoder = new google.maps.Geocoder(); |
10 |
var latlng = new google.maps.LatLng(39.9493, 116.3975); |
11 |
var myOptions = { |
12 |
zoom: 15, |
13 |
center: latlng, |
14 |
mapTypeId: google.maps.MapTypeId.ROADMAP |
15 |
} |
16 |
var address = remote_ip_info.country+remote_ip_info.province+remote_ip_info.city; |
17 |
document.getElementById('add').innerHTML = "欢迎来自："+address+"的朋友！"; |
18 |
var img='http://avatar.csdn.net/B/9/A/1_youacai.jpg'; |
19 |
|
20 |
if (geocoder) { |
21 |
geocoder.geocode( { 'address': address}, function(results, status) { |
22 |
if (status == google.maps.GeocoderStatus.OK) { |
23 |
map.setCenter(results[0].geometry.location); |
24 |
var marker = new google.maps.Marker({ |
25 |
map: map, |
26 |
position: results[0].geometry.location, |
27 |
title:'位置', |
28 |
icon:img |
29 |
|
30 |
}); |
31 |
|
32 |
} |
33 |
}); |
34 |
} |
35 |
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); |
36 |
} |
37 |
|
38 |
|
39 |
|
40 |
</script> |
41 |
42 |
<body onload="initialize()"> |
43 |
<div id="add" style=" height:26px;color:#F00;font-size: 18pt;"></div> |
44 |
|
45 |
<div id="map_canvas" style="width: 380px; height: 280px;"></div> |
