google map 初体验
时间:2022-06-10
本文章向大家介绍google map 初体验,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
先看一下效果图:
点击这个链接:
下面是实现代码:
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">Google
16 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>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- linux虚拟机配置静态IP地址的完整步骤
- Linux下Mysql定时任务备份数据的实现方法
- Linux系统下快速配置HugePages的完整步骤
- 解决Linux Tensorflow2.0安装问题
- 工作中常用到的Linux命令总结
- Linux中把用户添加到组的4个方法总结
- Linux下配置jdk环境的方法
- Ubuntu 16.04/18.04 安装Pycharm及Ipython的教程
- linux系统对外开放3306、8080等端口,防火墙设置详解
- Linux中selinux基础配置教程详解
- Linux中如何查看已挂载的文件系统类型详解
- 在 Linux 命令行中使用 tcpdump 抓包的一些功能
- CentOS平台快速搭建LAMP环境的方法
- Linux系统中时间的获取和使用
- 基于Linux搭建Apache网站服务配置详解