电信主站 网通分站
购买流程 付款方式 常见问题 在线提问 续租服务 购物车
用户名: 密 码: 忘记密码?
首 页
域名注册
虚拟主机
双线主机
服务器租用
VPS主机
企业邮局
代理专区
客服中心
虚拟主机行业资讯 虚拟主机评测对比 互联网最新动态 技术学院 站长资讯 在线教程 网站运营
搜索优化 服务器 网络编程 图形图象 站长之家 网页制作 操作系统
冲浪宝典 软件教学 视频通信 办公软件 邮件系统 网络安全 认证考试
您当前位置:西部数码->资讯中心-> 网页制作-> 心得技巧
利用google map api在blog上显示自己的google map_心得技巧教程
作者:网友供稿 点击:0
  西部数码-全国虚拟主机10强!20余项虚拟主机管理功能,全国领先!第6代双线路虚拟主机,南北访问畅通无阻!虚拟主机可在线rar解压,自动数据恢复设置虚拟目录等.虚拟主机免费赠送访问统计,企业邮局.Cn域名注册10元/年,自助建站480元起,免费试用7天,满意再付款!P4主机租用799元/月.月付免压金!
文章页数:[1] 

当当当当~大家请看下面的链接,哈哈,是不是看到是一小淫僧,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://www.knowsky.com/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>你这个淫真是的,摸人家干啥啊?</s>; //这里是显示在信息框里的东东,支持HTML
      icon.image = "http://www.misuisui.com/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 = "http://www.misuisui.com/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 = "http://www.misuisui.com/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 = "http://www.misuisui.com/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>

出处:http://www.misuisui.com/weblog/article.asp?id=398


文章整理:西部数码--专业提供域名注册虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!
相关主题
文章页数:[1] 
Google
热门文章
·填充图案的定义和创建_autocad教程
·提高网页下载速度的网页制作方法二则_心得技巧教程
·解密.htm.html.shtm.shtml的区别与联系_心得技巧教程
·介绍三种网页播放器好代码_心得技巧教程
·div不是万能膏药_心得技巧教程
·打开新的窗口与保住页面的referrer_心得技巧教程
·用vb设计更换屏幕保护的程序_visualbasic教程
·了解库搜索路径和命令搜索过程_autocad教程
·做web2.0网站可以参考的十九条规则_心得技巧教程
·robots.txt和robots meta标签_心得技巧教程

最新文章
·经典收藏:网页页面常用的特殊符号_心得技巧教程
·用html和css写出漂亮正规的blog_心得技巧教程
·网站页面的均衡规划与选择_心得技巧教程
·一个网友观点:两年以来使用div排版的经验_心得技巧教程
·photoshop制作“非主流”彩虹色调照片_photoshop教程
·禁止查看网页源代码方法总结_心得技巧教程
·左右图片循环滚动停顿一下后继续_心得技巧教程
·图片左右循环连续滚动代码,解决marquee的留白问题 _心得技巧教程
·zend framework 1.0正式版即将发布_php文摘
·网页中各度量单位的比较_心得技巧教程


 
 


版权申明:本站文章均来自网络,如有侵权,请联系我们,我们收到后立即删除,谢谢!

特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有。
  打印  刷新  关闭
返回首页 |关于我们 | 联系我们 | 付款方式 | 创业联盟 | 虚拟主机 | 资讯中心 | 友情链接 | 网站地图

版权所有 西部数码(www.west263.com)
CopyRight (c) 2002~2006 west263.com all right reserved.
公司地址:四川成都市万和路90号天象大厦4楼 邮编:610031
电话总机:028-86262244 86263048 86263408 86263960 86264018 86267838
售前咨询:总机转201 202 203 204 206 208
售后服务:总机转211 212 213 214
财务咨询:总机转224 223 传真:028-86264041 财务QQ:点击发送消息给对方635483282
售前咨询QQ:点击发送消息给对方2182518 点击发送消息给对方241975952 点击发送消息给对方275026793 点击发送消息给对方408235859
售后服务QQ:点击发送消息给对方17708515 点击发送消息给对方307742704 点击发送消息给对方287976517 点击发送消息给对方363783715
《中华人民共和国增值电信业务经营许可证》编号:川B2-20030065号