WordPress中文论坛 - WordPress Chinese Forums

 找回密码
 注册
查看: 2563|回复: 3

谁有51 Blog Google Maps 插件

[复制链接]

1

主题

3

帖子

0

金钱

WP 新手

Rank: 1

积分
15
发表于 2006-11-24 18:36:14 | 显示全部楼层 |阅读模式
搜索了一个下午没有搜到!

介绍在这里,谁有分享一下http://blog.51.ca/faq/2006/10/16 ... %e5%9b%be%ef%bc%9f/

1

主题

3

帖子

0

金钱

WP 新手

Rank: 1

积分
15
 楼主| 发表于 2006-11-24 21:56:08 | 显示全部楼层
谁有这个相似的插件吗?

1

主题

3

帖子

0

金钱

WP 新手

Rank: 1

积分
15
 楼主| 发表于 2006-11-24 21:57:00 | 显示全部楼层
  1. 把Google Maps加到自己的Blog里
  2. 具体效果可以看我主页的About me,这也算是Google Map最简单的玩法了,我就用dancemoon.net作例子,具体介绍一下在Blog添加Google Maps的方法。

  3. 首先需要到http://www.google.com/apis/maps/申请一个API key,你需要用你的GmailID登录。申请成功以后你会得到一个API key,和一段添加到网页的事例代码,去掉一些没有用的Html代码以后剩下:

  4. <script src="http://maps.google.com/maps?file=api&v=1&key=
  5. [API key]" type="text/javascript"></script>
  6.     <div id="map" style="width: 500px; height: 400px"></div>
  7.     <script type="text/javascript">
  8.     //<![CDATA[
  9.    
  10.     var map = new GMap(document.getElementById("map"));
  11.     map.addControl(new GSmallMapControl());
  12.     map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
  13.    
  14.     //]]>
  15.     </script>
  16. 其中
  17. <div id="map" style="width: 500px; height: 400px"></div>

  18. 这行可以自定义显示Google Maps的宽(width)和高(height)。

  19. map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);

  20. 这行算是整段代码最重要的部分,可以用来调整Google Maps显示的地理位置(-122.1419, 37.4419)和大小(4)。我们下面要做的就是把这两行代码替换成适合自己的。

  21. 到http://maps.google.com在地图上找到自己所在的位置,用鼠标双击,你双击的那点就会显示在地图的中央,然后点击右上角的Link to this page,地址栏里的地址就包含了你的坐标信息,比如我在的大连地址是:

  22. http://maps.google.com/?ll=38.794768,121.294556&spn=1.051049,2.04071

  23. 其中38.794768,121.294556,就是大连的坐标,把他们替换到代码里:

  24. map.centerAndZoom(new GPoint(121.294556, 38.794768), 15);

  25. 因为Google Maps显示的中国的信息有限,所以不要把最后的数值设得太小,我写的是15(最大到16),具体自己把握就行。

  26. 如果想在自己的位置上加个标记,那把下面这段代码加到map.centerAndZoom...这行下面:

  27. map.addOverlay(new GMarker(new GPoint(121.294556, 38.794768)));

  28. 还想在标记上加上弹出气泡的功能,就加入下面一段:

  29.     var dalian = new GMarker (new GPoint (121.294556, 38.794768));
  30. GEvent.addListener (dalian, "click", function() {
  31. dalian.openInfoWindowHtml ("我在大连 Oh!Yeah!");
  32. });
  33. map.addOverlay (dalian);最后的代码就是这些:

  34. <script src="http://maps.google.com/maps?file=api&v=1&key=
  35. [API key]" type="text/javascript"></script>
  36.     <div id="map" style="width: 400px; height: 300px"></div>
  37.     <script type="text/javascript">
  38.     //<![CDATA[
  39.    
  40.     var map = new GMap(document.getElementById("map"));
  41.     map.addControl(new GSmallMapControl());
  42.     map.centerAndZoom(new GPoint(121.294556, 38.794768), 15);
  43.         var dalian = new GMarker (new GPoint (121.294556, 38.794768));
  44. GEvent.addListener (dalian, "click", function() {
  45. dalian.openInfoWindowHtml ("我在大连 Oh!Yeah!");
  46. });
  47. map.addOverlay (dalian);
  48.     //]]>
  49.     </script>
复制代码

1

主题

17

帖子

-15

金钱

WP 新手

Rank: 1

积分
2
发表于 2006-11-29 17:09:29 | 显示全部楼层
有没有兴趣做个google map的聚合?呵呵~就是用可以显示所有加入的WPer的位置
接单定做wordpress插件,请密我你要的功能,使用域名,能承受的价格~~
您需要登录后才可以回帖 登录 | 注册

本版积分规则

Archiver|手机版|小黑屋|联系我们|WordPress中文论坛 - CNWP ( 闽ICP备12016335号-11 )

GMT+8, 2020-7-15 10:08 , Processed in 0.118624 second(s), 29 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表