打造属于自己的谷歌Maps版博客公告【演示+源码】
来源:互联网 发布:python 2.7中文版 编辑:程序博客网 时间:2024/05/29 06:46
很喜欢博客园可以自定义代码的风格,今天在装饰自己的公告时候突然想加个地图来显示游客的当前位置,想到做到,那就自己动手做一下,
地图:谷歌地图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
>
- 打造属于自己的谷歌Maps版博客公告【演示+源码】
- 用hexo打造属于自己的静态博客
- docker+mysql+ghost打造属于自己的博客系统
- 打造属于自己的 gVim !
- 打造属于自己的Notepad++
- 打造属于自己的uboot
- 打造属于自己的Vim
- 打造属于自己的RxBus
- 打造属于自己的RxBus
- 打造属于自己的RxBus
- 打造属于自己的vim
- 教你如何打造属于自己的QQ纯净版
- 写属于自己的博客
- 教你如何用免费域名打造属于自己的博客
- 史上最简洁明了的配置hexo+github打造属于自己github pages博客
- 打造属于自己的sample framework(一)
- 打造属于自己的eclipse plugin 插件
- 打造属于自己的正则表达式
- ajax跨域
- 不同数据库SQL语句分页
- winform 窗体禁用关闭按钮的三种方法
- java上传文件
- 中石油大型企业级广域网的管理
- 打造属于自己的谷歌Maps版博客公告【演示+源码】
- 防火长城
- unzip解压源码
- url 设计规范
- 要爱惜自己的身体
- 腾讯(转载)
- JQuery笔记10:JQuery 样式操作
- 查询身份证信息的JAVA实现
- preload & preinstall