网站公告列表

没有公告

加入收藏
设为首页
联系站长
轻松学电脑>>网页制作>>心得技巧>>利用Google Map API在BLOG上显示自己的Google Map
双击滚屏阅读

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

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

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

第二步
把 http://www.misuisui.com/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.

[1] [2] [3] 下一页

 
  • 上一篇文章:

  • 下一篇文章:
  • 广告
    阅读top10
    普通文章如何防止robot骚扰你的…
    普通文章给你的QQ在线状态配上…
    普通文章让文本输入框只能输入…
    普通文章如何像表格table一样对…
    普通文章网页中添加调用qq或者…
    普通文章rel=nofollow互联网为…
    普通文章网页自动转向代码
    普通文章innerHTML在Firefox和…
    普通文章Google已推出基于Co-o…
    普通文章巧妙实现很酷的动态背…
    普通文章网页编程安全漏洞全接…
    普通文章实现浏览器全屏窗口的…
    普通文章搜索引擎技术核心揭密
    普通文章公司建站完全手册--网…
    查看利用Google Map API在BLOG上显示自己的Google Map全部内容
    本站提供:电脑教程 网页制作 Flash教程 PhotoShop教程等免费教程。
    Copyright © 2006-2008轻松学电脑All Rights Reserved