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

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /www/wwwroot/s5s5.me/wp-content/plugins/wp-syntax/wp-syntax.php on line 380

当当当当～大家请看下面的链接，哈哈，是不是看到是一小淫僧，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～

<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>

<div id="map" style="width: 600px; height: 400px; border: 1px solid #979797"></div>  <script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAlwlonOoTX0oPrDaRmH_ALBREKWcFDKg74ezPgAUa79EBKj9z1BTjAKcZV51YfdN2n4xhiJ2lKuvBeA" type="text/javascript"></script>  <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>

“利用Google Map API在BLOG上显示自己的Google Map”上的84条回复

Maple说：

2006-03-25 05:27:44

米兄果然活到老学到老~
old9说：

2006-03-25 08:13:09

为啥firefox下看不到捏？
ato_wap说：

2006-03-25 12:47:02

哇，真的蛮新鲜的么，嘿，这个地址是随兄工作的地方？？？
a2z说：

2006-03-25 14:09:17

可惜没有顶级域名。
还有好像FF下看不到你的地图哦。
s5s5说：

2006-03-25 15:19:02

@Maple：晕～还没老呢～
@old9：这是FF的一个BUG，详情看这里啊～
http://www.zeali.net/blog/entry.php?id=228
@ato：这是住的地方～
@a2z：呵呵，注一个玩吧，好象60多块～
old9说：

2006-03-25 17:34:50

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

2006-03-25 18:35:48

要么是GOOGLE MAP的问题？
juyo说：

2006-03-25 22:49:22

用你的方法试了试，但是有点问题，放到最大是怎么会是你的地图？望不厌赐教。
http://www.juyoclub.com/google_map.htm
jerry说：

2006-03-26 10:38:07

这里有一个简单的，只需要加一个js链接就行,http://blog.donews.com/carcar/
s5s5说：

2006-03-26 10:57:17

@juyo：晕，你的地图我怎么打不开呢？要不你重新再来一次，只要把代码里的KEY改了就可以了~
@jerry：嗯，性质不一样。。。你哪个不好玩~
被鱼噎到滴猫说：

2006-03-27 00:32:32

GOOGLE 8给偶面子~改天再试试阿弥陀佛~
19861110说：

2006-04-05 16:46:03

fkljk dvkddhusdhjefjr日光浴够受的搞活集散地感 VDHGUDYG DHSDGSYUYUQTY G GHDFE FHEHWE AFHH ；
H FHHFhuHJHJDFHHKFR HhhhhjKFGI R F
19861110说：

2006-04-05 16:53:32

这在论？
sunisi2008说：

2006-04-20 08:54:26

我弄过,但不能看我家啊…..哎~~
dsxing说：

2006-04-29 16:20:30

我也搞了一个 http://www.dsxing.com/mymap.htm
dsxing说：

2006-04-29 16:21:09

谁有更高级的功能，给回复一个，感谢这个blog的主人。
ding说：

2006-05-09 13:53:04

为什么你标注地区的地图能显示到具体的建筑，而其他省市却不能显示。
s5s5说：

2006-05-09 14:50:16

这和GOOGLE的地图有关，可能是咱们国家不准GOOGLE这么搞吧～
micks说：

2006-06-23 18:38:51

golf suka
ssssss说：

2006-07-15 13:33:13

米兄，我想问一下。注册一个KEY要多少钱？是按年算还是按月算？怎么付？
s5s5说：

2006-07-15 17:28:30

不要钱的，呵呵～
ssssss说：

2006-07-17 09:33:26

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

2006-07-17 18:38:17

这个比较难啊，要写很多程序的～
dt1说：

2006-08-15 23:35:41

能在地图上获取到我点击的经纬度吗?
rollenc说：

2006-09-15 14:11:56

呵呵，简单的办法是去http://www.eemap.org,建立一个点，然后直接在BLOG上使用引用，就可以了
小戴说：

2006-09-18 08:52:54

顶起来,用EEMAP的Blog引用功能
YET说：

2006-11-05 17:16:02

我是用WORDPRESS的，我想问问能否直接在BLOG页面中嵌入这个地图！
谢谢你，我找了好多地方问都没有结果！
s5s5说：

2006-11-18 20:20:47

用iframe就可以把图放到BLOG中了～你搜索一下iframe就可以了～
gloria说：

2007-04-25 17:11:18

请问怎样才能显示自己想要的地图呢？？比方说我所在的江苏省苏州市？谢谢！！
s5s5说：

2007-04-25 17:53:56

第五步
打开 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
然后就是把这个数字添加到代码中你想要添加的地方了～
summernight说：

2007-05-07 13:49:11

请问朋友我要是想自己弄张图当做地图能实现不?
s5s5说：

2007-05-07 14:42:00

当然是可以的,不过我不太会~
arthur说：

2008-07-03 13:00:23

https://s5s5.me/google_map.htm
“google_map.htm”一定要连着com吗？？？
wendongbu说：

2008-09-01 13:11:52

sds
danny说：

2008-09-30 12:16:21

请问怎么才能在地图上嵌入照片呢？
sky说：

2008-10-31 16:07:19

哎…这也太简单了吧,随便GOOGLE MAP api两句代码就搞定
www.yixizhidi.cn说：

2008-12-16 18:01:21

简单么，你们给的地址，我都没看到效果啊~
wuhuang95说：

2009-02-04 13:42:30

想请教GOOGLE影像文件行号的计算规则，，能给我QQ号码吗？？我的是4000357，，先谢啦
1. s5s5说：
  
  2009-02-05 15:07:56
  
  不好意思，我也不懂啊。。。
deyifeng说：

2010-12-20 18:49:57

能不能把地图打印出来啊，可以的话联系我，deyifeng@126.com
1. 米随随说：
  
  2010-12-21 09:21:00
  
  直接打印网页就可以了啊……
wuwengs说：

2011-02-09 15:10:03

米兄，貌似在ie8下我也没看到你的效果，你给看一下呀
我想看看效果学习一下

评论已关闭。

发布者：s5s5

“利用Google Map API在BLOG上显示自己的Google Map”上的84条回复