找回密码
 注册

QQ登录

只需一步,快速开始

查看: 2322|回复: 10

[求助] 谷哥API地图怎么嵌入到网页里面?

[复制链接]
发表于 2012-10-22 20:47:47 | 显示全部楼层 |阅读模式



我有一个网站,一直想做一个谷歌的API地图,

但一直,都不知道怎么去做

在网上找了很多资料,一直看不懂,

谁能详细的,做个教程,或者网上有什么好的教程,可以推荐一下

谢谢




发表于 2012-10-22 21:19:13 | 显示全部楼层
申请一个API,API是javascript代码,在HTML里面用脚本标签引入。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-10-23 23:35:18 | 显示全部楼层
人气怎么不忘啊。
回复 支持 反对

使用道具 举报

发表于 2012-10-24 08:18:51 | 显示全部楼层
对呀,二楼说的对呀,就是那样子做的呀,呵呵
回复 支持 反对

使用道具 举报

发表于 2012-10-24 15:35:39 | 显示全部楼层
  1. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&language=zh_CN"></script>
  2. <script type="text/javascript">
  3.   function initialize() {
  4.         var myOptions = {
  5.           scaleControl: true,
  6.           center: new google.maps.LatLng(31.217683, 121.535264),
  7.           zoom: 15,
  8.           mapTypeId: google.maps.MapTypeId.ROADMAP
  9.         };
  10.        
  11.         var myOptions2 = {
  12.           scaleControl: true,
  13.           center: new google.maps.LatLng(29.819367,121.551726),
  14.           zoom: 15,
  15.           mapTypeId: google.maps.MapTypeId.ROADMAP
  16.         };

  17.         var map = new google.maps.Map(document.getElementById('map_canvas'),
  18.                 myOptions);
  19.         var map2 = new google.maps.Map(document.getElementById('map_canvas2'),
  20.                 myOptions2);

  21.         var marker = new google.maps.Marker({
  22.           map: map,
  23.           position: map.getCenter()
  24.         });
  25.        
  26.         var marker2 = new google.maps.Marker({
  27.           map: map2,
  28.           position: map2.getCenter()
  29.         });
  30.        
  31.         var infowindow = new google.maps.InfoWindow();
  32.         infowindow.setContent('<div>上海森浦<br /><span style="font-size:12px;paddding-top:5px;">杨高南路428号由由世纪广场2号楼7楼A-B座</span></div>');
  33.         google.maps.event.addListener(marker, 'click', function() {
  34.                 infowindow.open(map, marker);
  35.         });
  36.        
  37.         var infowindow2 = new google.maps.InfoWindow();
  38.         infowindow2.setContent('<div>宁波森浦<br /><span style="font-size:12px;paddding-top:5px;">鄞县大道中段1357号广博国贸中心25层</span></div>');
  39.         google.maps.event.addListener(marker2, 'click', function() {
  40.                 infowindow2.open(map2, marker2);
  41.         });
  42.   }

  43.   google.maps.event.addDomListener(window, 'load', initialize);
  44.   
  45. </script>
  46. <div class="gMaps"><div id="map_canvas" class="map_canvas"></div></div>
复制代码
回复 支持 反对

使用道具 举报

发表于 2012-10-24 16:41:41 | 显示全部楼层
本帖最后由 kerwinche 于 2012-10-24 16:42 编辑

給你個例子吧
  1. <html>
  2. <head>
  3. <script  type="text/javascript"></script>

  4. </head>
  5. <body>
  6. <div id="map" style="width:300px;height:300px;"></div>
  7. <script type="text/javascript">
  8. showMap();
  9. function showMap() {  
  10.           var mapX=22.213103,
  11.                     mapY=113.548258,
  12.                     macao=new google.maps.LatLng(mapX,mapY),

  13.                   mapOptions={
  14.                                           center: macao,
  15.                                           zoom: 17,
  16.                                           mapTypeId: google.maps.MapTypeId.ROADMAP,
  17.                                           streetViewControl: false
  18.                    },

  19.                   map=new google.maps.Map(document.getElementById('map'),mapOptions),
  20.                   
  21.                   orginalMarker = new google.maps.Marker({position: macao,map: map,title:''}); //標誌
  22. }
  23. </script>
  24. </body>
  25. </html>
复制代码
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-10-30 15:07:57 | 显示全部楼层
Kiner 发表于 2012-10-24 15:35

这段代码 放进DW里面 测试什么都没有。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-10-30 15:09:09 | 显示全部楼层
kerwinche 发表于 2012-10-24 16:41
給你個例子吧

放进DW里面 测试 前台页面没有任何东西
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-10-30 15:10:02 | 显示全部楼层
coyness 发表于 2012-10-22 21:19
申请一个API,API是javascript代码,在HTML里面用脚本标签引入。

能否详细点吗, 真的弄不懂,谢谢
回复 支持 反对

使用道具 举报

发表于 2012-10-30 17:34:28 | 显示全部楼层
zs817 发表于 2012-10-30 15:09
放进DW里面 测试 前台页面没有任何东西

你没加入API吧?
  1. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&language=zh_CN"></script>
复制代码
回复 支持 反对

使用道具 举报

发表于 2012-10-30 17:34:52 | 显示全部楼层
你没加入API吧?
  1. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&language=zh_CN"></script>
复制代码
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )

GMT+8, 2021-1-20 12:10 , Processed in 0.065485 second(s), 7 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

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