利用Google Map API在BLOG上显示自己的Google Map

当当当当~大家请看下面的链接,哈哈,是不是看到是一小淫僧,HOO~
https://s5s5.me/google_map.htm
哈哈,好玩吧~是不是也想搞一个呢?Follow Me~

第一步
http://www.google.com/apis/maps/ 申请一个 Google Maps API key ,当然,你得有顶级域名才行。。。 乱申请的你如果不放到你这个域名下,那这个就根本用不了。。。
Google会给您一段代码,可要保存好哦~

第二步
https://s5s5.me/google_map.htm 打开,看一看里面的源化码,我已经写好说明了,大家照猫画虎就行了,HOHO~主要代码在最下面~

第三步
把第一步里申请来的 Google Maps API key 改掉代码中的 ABQIAAAAlwlonOoTX0oPrDaRmH_ALBREKWcFDKg74ezPgAUa79EBKj9z1BTjAKcZV51YfdN2n4xhiJ2lKuvBeA 一样的代码。。。

第四步
代码里的哪个PNG图标不好找,在网上狂搜吧。。。 要不自己做一个
嗯,还有那个坐标不好找,大家请看第四步

第五步
打开 http://www.google.com/maps
找啊找啊,找到你所在的地方,然后点那个右上角那个“Link to this page”
得到一个这样的链接 http://www.google.com/maps?f=q&hl=en&q=china&ll=35.86166,104.195397&spn=32.116109,88.242188&t=h
注意 35.86166, 104.195397 这一段数字,这就是当前地图中心点的坐标了
把逗号后面的数字放到逗号前面变成这样 104.195397, 35.86166
然后就是把这个数字添加到代码中你想要添加的地方了~

第六步
根据代码里的提示,发挥你的想象力,然后做点啥出来~做出啥来了,也告诉我一下,让我也看看啊~
比如我就要做个友情链接的东东,HOHO~和我友链的朋友们麻烦参考第五步把你想要标在我的友情链接地图上的坐标告诉我啊,HOHO~

第七步
嗯嗯,希望这几天大家要常来这儿了,因为有一个好东东要给大家告诉大家啦~HOHO~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<div id="map" style="width: 600px; height: 400px; border: 1px solid #979797"></div>
<!-- 把以上代码为地图的宽和高,可修改里面的数值,不要改里面的ID -->
 
 
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAlwlonOoTX0oPrDaRmH_ALBREKWcFDKg74ezPgAUa79EBKj9z1BTjAKcZV51YfdN2n4xhiJ2lKuvBeA" type="text/javascript"></script>
<!-- 此为Google Map API 的验证码,用到自己的网站要去 http://www.google.com/apis/maps/ 审请一个 -->
 
<script type="text/javascript">
    //< ![CDATA[
 
        function createMarker(point, baseIcon, html) {
            var icon = new GIcon(baseIcon);
            var marker = new GMarker(point, icon);
 
            GEvent.addListener(marker, 'click', function() {
            marker.openInfoWindowHtml(html);
            });
 
        return marker;
        }
 
        function loadMap(){
            var map = new GMap(document.getElementById("map"));
            map.addControl(new GLargeMapControl());
            map.setMapType(G_HYBRID_TYPE);
            map.centerAndZoom(new GPoint(116.429114, 39.934322), 0); //在这里116.429114, 39.934322代表地图的中心位置,后面的0是放到最大,数字越大,地图显示的越多
 
            // 以下是定义一些基本信息
            // 阴影,阴影偏移,信息框偏移, 什么什么的
            var icon = new GIcon();
            icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
            icon.shadowSize = new GSize(21, 29);
            icon.iconAnchor = new GPoint(10, 30);
            icon.infoWindowAnchor = new GPoint(9, 5);
            icon.infoShadowAnchor = new GPoint(9, 5);
 
            //在地图上标一个图标,点击就出现字
            var html = '<s>你这个淫真是的,摸人家干啥啊?'; //这里是显示在信息框里的东东,支持HTML
            icon.image = "https://s5s5.me/images/21_29_s5s5.png"; //定义图标,一定要PNG格式的
            icon.iconSize = new GSize(21, 29); //图标的宽和高
            var point = new GPoint(116.429114, 39.934322); //图标标在地图的哪里
 
            var marker = createMarker(point, icon ,html);
            map.addOverlay(marker);
            //标一个图标完毕
 
            //在地图上再标一个图标,点击就出现字,改的方法如上
            html = '<i>淫僧法号米随随~</i>';
            icon.image = "https://s5s5.me/images/21_29_s5s5.png";
            icon.iconSize = new GSize(21, 29);
            point = new GPoint(116.429424, 39.934322);
 
            marker = createMarker(point, icon ,html);
            map.addOverlay(marker);
            //标一个图标完毕,这段代码复制多少个,就有多少个图标,只要改改里面的东东就可以了
 
            //在地图上再标一个图标,点击就出现字,改的方法如上
            html = '点击<a href="#" target="_self">这里</a>看看米随随是怎么整出来的~';
            icon.image = "https://s5s5.me/images/21_29_s5s5.png";
            icon.iconSize = new GSize(21, 29);
            point = new GPoint(116.429314, 39.934522);
 
            marker = createMarker(point, icon ,html);
            map.addOverlay(marker);
            //标一个图标完毕,这段代码复制多少个,就有多少个图标,只要改改里面的东东就可以了
 
            //在地图上再标一个图标,点击就出现字,改的方法如上
            html = '<div><font color="blue">阿弥陀佛~淫僧米随随哪!~</font></div>';
            icon.image = "https://s5s5.me/images/21_29_s5s5.png";
            icon.iconSize = new GSize(21, 29);
            point = new GPoint(116.429714, 39.934522);
 
            marker = createMarker(point, icon ,html);
            map.addOverlay(marker);
            //标一个图标完毕,这段代码复制多少个,就有多少个图标,只要改改里面的东东就可以了
 
            //最后一个图标将一开始显示下面的内容
            defaultmsg = '<div><font color="red">点击淫僧米随随哪!~</font></div>'; //这里是显示在信息框里的东东,支持HTML
            marker.openInfoWindowHtml(defaultmsg);
 
 
 
        }
 
 
        loadMap();
 
    //]]>
</script>
打赏

发布者:s5s5

https://s5s5.me

加入对话

84条评论

  1. 哇,真的蛮新鲜的么,嘿,这个地址是随兄工作的地方???

  2. 好像不是这个问题吧,不是全看不见,里面那个小僧和字都看见了,还有阴影,就是地图不出现。
    另外这篇是在opera9下发的,和firefox效果差不多,也看不见地图…..  

  3. @juyo:晕,你的地图我怎么打不开呢?要不你重新再来一次,只要把代码里的KEY改了就可以了~
    @jerry:嗯,性质不一样。。。你哪个不好玩~

  4. fkljk  dvkddhusdhjefjr日光浴 够受的搞活集散地感  VDHGUDYG    DHSDGSYUYUQTY G  GHDFE    FHEHWE  AFHH ;
       H FHHFhuHJHJDFHHKFR  HhhhhjKFGI R   F                   

  5. 谁有更高级的功能,给回复一个,感谢这个blog的主人。

  6. 为什么你标注地区的地图能显示到具体的建筑,而其他省市却不能显示。

  7. 这和GOOGLE的地图有关,可能是咱们国家不准GOOGLE这么搞吧~

  8. 米兄,我想问一下。注册一个KEY要多少钱?是按年算还是按月算?怎么付?

  9. 谢谢。我问一下在别人可不可以在我的网站地图上添加他的位置。谢谢。

  10. 我是用WORDPRESS的,我想问问能否直接在BLOG页面中嵌入这个地图!
    谢谢你,我找了好多地方问都没有结果!

  11. 用iframe就可以把图放到BLOG中了~你搜索一下iframe就可以了~

  12. 请问怎样才能显示自己想要的地图呢??比方说我所在的江苏省苏州市?谢谢!!

  13. 第五步
    打开 http://www.google.com/maps
    找啊找啊,找到你所在的地方,然后点那个右上角那个“Link to this page”
    得到一个这样的链接 http://www.google.com/maps?f=q&hl=en&q=china&ll=35.86166,104.195397&spn=32.116109,88.242188&t=h
    注意 35.86166, 104.195397 这一段数字,这就是当前地图中心点的坐标了
    把逗号后面的数字放到逗号前面变成这样 104.195397, 35.86166
    然后就是把这个数字添加到代码中你想要添加的地方了~

  14. 想请教GOOGLE影像文件行号的计算规则,,能给我QQ号码吗??我的是4000357,,先谢啦

  15. 能不能把地图打印出来啊,可以的话联系我,deyifeng@126.com

留下评论

电子邮件地址不会被公开。 必填项已用*标注