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弹出窗口居前显示的实现方法
Jul 10 Javascript
热点新闻滚动特效的js代码
Aug 17 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 Javascript
jQuery 中国省市两级联动选择附图
May 14 Javascript
JS简单计算器实例
Jan 20 Javascript
js生成随机数的过程解析
Nov 24 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
VUE中使用MUI方法
Feb 12 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
php后退一页表单内容保存实现方法
2012/06/17 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
举例讲解Python中装饰器的用法
2015/04/27 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
python记录程序运行时间的三种方法
2017/07/14 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
Pyqt5实现英文学习词典
2019/06/24 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
金融专业大学生自我评价
2014/01/09 职场文书
社区优秀志愿者先进事迹
2014/05/09 职场文书
团结演讲稿范文
2014/05/23 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
一条 SQL 语句执行过程
2022/03/17 MySQL