google map 初体验

Hongten · 发表于 2012-12-22 21:33:20

<div id="cnblogs_post_body">先看一下效果图：

点击这个链接：

下面是实现代码：
<div class="cnblogs_code"> 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>Google Map</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <link rel="stylesheet" 7 href="http://www.osctools.net/uploads/jquery/dialog/fancybox/source/jquery.fancybox.css?v=2.0.6" 8 type="text/css" media="screen" /> 9 </head>10 <body>11 <div class="section">12 <ul>13 <li>14 <a class="various fancybox.iframe"15 href="http://maps.google.com.hk/?output=embed&f=q&source=s_q&hl=en&geocode=&q=London+Eye,+County+Hall,+Westminster+Bridge+Road,+London,+United+Kingdom&hl=lv&ll=51.504155,-0.117749&spn=0.00571,0.016512&sll=56.879635,24.603189&sspn=10.280244,33.815918&vpsrc=6&hq=London+Eye&radius=15000&t=h&z=17">Google16 Maps (iframe)</a>17 </li>18 </ul>19 </div>20 <script type="text/javascript"21 src="http://www.osctools.net/js/jquery/jquery-1.7.2.js"></script>22 <script type="text/javascript"23 src="http://www.osctools.net/uploads/jquery/dialog/fancybox/source/jquery.fancybox.pack.js?v=2.0.6"></script>24 <script>25 $(document).ready(function() {26 $(".fancybox").fancybox( {27 openEffect : 'none',28 closeEffect : 'none'29 });30 31 $(".various").fancybox( {32 maxWidth : 800,33 maxHeight : 600,34 fitToView : false,35 width : '70%',36 height : '70%',37 autoSize : false,38 closeClick : false,39 openEffect : 'none',40 closeEffect : 'none'41 });42 43 $(".fancybox-button").fancybox( {44 prevEffect : 'none',45 nextEffect : 'none',46 closeBtn : false,47 helpers : {48 title : {49 type : 'inside'50 },51 buttons : {}52 }53 });54 });55 </script>56 </body>57 </html>

		自动登录	找回密码
密码			立即注册