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与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
js数组去重的方法汇总
Jul 29 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
JS基于递归实现网页版计算器的方法分析
Dec 20 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
浅谈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 开发工具
2006/12/06 PHP
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
python+mongodb数据抓取详细介绍
2017/10/25 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
我就是这样学习Python中的列表
2019/06/02 Python
Python实现对adb命令封装
2020/03/06 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
研究生自荐信
2013/10/09 职场文书
计算机软件专业求职信
2014/06/10 职场文书