Google Maps基础及实例解析


Posted in Javascript onAugust 06, 2016

Google Maps 基础

创建一个简单的 Google 地图

现在让我们创建一个简单的 Google 地图。

以下是显示了英国伦敦的 Google 地图:

实例

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
function initialize()
{
var mapProp = {
 center:new google.maps.LatLng(51.508742,-0.120850),
 zoom:5,
 mapTypeId:google.maps.MapTypeId.ROADMAP
 };
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>

</body>
</html>

实例效果图(可以拷贝直接运行,当然你要能够访问Google

Google Maps基础及实例解析

实例解析

我们以以上实例来解析 Google 地图的创建过程。

应用为什么要声明 HTML5?

<!DOCTYPE html>

大多数浏览器使用 "标准模式" 的 HTML5 文档渲染页面,这就意味着你的应用是兼容各大浏览器的。

另外,如果没有DOCTYPE标签,浏览器则使用混杂模式 (quirks mode)进行渲染页面内容。

提示: 应该注意的是一些"混杂模式 "中的CSS并不能使用与标准模式中。在具体的应用中,所有基于百分比的大小都必须从父块元素继承 。如果在父模块中没有指定大小,默认值为 0 x 0 像素。如果你想使用百分比,可以在<style> 标签中声明,如下所示:

<style type="text/css">
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>

这个样式声明表明地图模块的(GoogleMap)应 HTML高度为100%。

添加 Google 地图 API Key

在以下实例中第一个<script> 标签中必须包含 Google 地图 API:

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

将google生成的 API key 放置于 key 参数中(key=YOUR_API_KEY)。

The sensor 参数是必须的,该参数用于指明应用程序是否使用一个传感器 (类似 GPS 导航) 来定位用户的位置。参数值可以设置为 true 或者 false。

HTTPS

如果你的应用是安全的HTTP(HTTPS:HTTP Secure)应用,你可以使用 HTTPS 来加载 Google 地图 API:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

异步加载

同样我们也可以在页面完全载入后再加载 Google 地图 API。

以下实例使用了 window.onload 来实现页面完全载入后加载 Google 地图 。 loadScript() 函数创建了加载 Google 地图 API <script> 标签。此外在标签的末尾添加了 callback=initialize 参数, initialize()作为回调函数会在API完全载入后执行:

实例

<!DOCTYPE html>
<html>
<head>
<script>
function initialize()
{
 var mapProp = {
 center: new google.maps.LatLng(51.508742,-0.120850),
 zoom:7,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

function loadScript()
{
 var script = document.createElement("script");
 script.type = "text/javascript";
 script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize";
 document.body.appendChild(script);
}

window.onload = loadScript;
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:500px;"></div>

</body>
</html>

定义地图属性

在初始化地图前,我们需要先创建一个 Map 属性对象来定义一些地图的属性:

var mapProp = {
 center:new google.maps.LatLng(51.508742,-0.120850),
 zoom:7,
 mapTypeId: google.maps.MapTypeId.ROADMAP
};

center(中心点)

中心属性指定了地图的中心,该中心通过坐标(纬度,经度)在地图上创建一个中心点。

Zoom(缩放级数)

zoom 属性指定了地图的 缩放级数。zoom: 0 显示了整个地球地图的完全缩放。

MapTypeId(地图的初始类型)

mapTypeId 属性指定了地图的初始类型。

mapTypeId包括如下四种类型:

google.maps.MapTypeId.HYBRID:显示卫星图像的主要街道透明层
google.maps.MapTypeId.ROADMAP:显示普通的街道地图
google.maps.MapTypeId.SATELLITE:显示卫星图像
google.maps.MapTypeId.TERRAIN:显示带有自然特征(如地形和植被)的地图

在哪里显示 Google 地图

通常 Google 地图使用于 <div> 元素中:

<div id="googleMap" style="width:500px;height:380px;"></div>

注意: 地图将以div中设置的大小来显示地图的大小,所以我们可以在 <div> 元素中设置地图的大小。

创建一个 Map 对象

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

以上代码使用参数(mapProp)在<div> 元素 (id为googleMap) 创建了一个新的地图。

提示:如果想在页面中创建多个地图,你只需要添加新的地图对象即可。

以下实例定义了四个地图实例 (四个地图使用了不同的地图类型):

实例

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
function initialize()
{
 var mapProp = {
 center: new google.maps.LatLng(51.508742,-0.120850),
 zoom:9,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var mapProp2 = {
 center: new google.maps.LatLng(51.508742,-0.120850),
 zoom:9,
 mapTypeId: google.maps.MapTypeId.SATELLITE
 };
 var mapProp3 = {
 center: new google.maps.LatLng(51.508742,-0.120850),
 zoom:9,
 mapTypeId: google.maps.MapTypeId.HYBRID
 };
 var mapProp4 = {
 center: new google.maps.LatLng(51.508742,-0.120850),
 zoom:9,
 mapTypeId: google.maps.MapTypeId.TERRAIN
 };
 var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
 var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapProp2);
 var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapProp3);
 var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapProp4);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap2" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap3" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap4" style="width:400px;height:300px;"></div>

</body>
</html>

加载地图

窗口载入后通过执行 initialize() 函数来初始化 Map 对象,这样可以确保在页面完全载入后再加载 Google 地图:

google.maps.event.addDomListener(window, 'load', initialize);

以上就是对Google 地图基础资料的整理,后续继续补充,谢谢大家对本站的支持!

Javascript 相关文章推荐
js的event详解。
Sep 06 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
jquery编写日期选择器
Mar 16 Javascript
BootStrap表单控件之文本域textarea
May 23 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
详解Vue取消eslint语法限制
Aug 04 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 #Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 #Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 #Javascript
Google 地图获取API Key详细教程
Aug 06 #Javascript
关于动态生成dom绑定事件失效的原因及解决方法
Aug 06 #Javascript
深入理解JS DOM事件机制
Aug 06 #Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 #Javascript
You might like
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python笔记(叁)继续学习
2012/10/24 Python
Python实现的tab文件操作类分享
2014/11/20 Python
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
使用Tensorflow将自己的数据分割成batch训练实例
2020/01/20 Python
python实现最速下降法
2020/03/24 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
英国电器零售商:PRC Direct
2018/06/21 全球购物
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
CSS预处理框架——Stylus
2021/04/21 HTML / CSS
HTML中的表格元素介绍
2022/02/28 HTML / CSS