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 相关文章推荐
javascript 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
JavaScript 语法集锦 脚本之家基础推荐
Nov 15 Javascript
SeaJS入门教程系列之完整示例(三)
Mar 03 Javascript
初步了解javascript面向对象
Nov 09 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
值得分享的Bootstrap Table使用教程
Nov 23 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
vue中$nextTick的用法讲解
Jan 17 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
May 16 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 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重新实现PHP脚本引擎内置函数
2007/03/06 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
PHP使用HTML5 FormData对象提交表单操作示例
2019/07/02 PHP
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
Python Web开发模板引擎优缺点总结
2014/05/06 Python
在Python中使用正则表达式的方法
2015/08/13 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
django正续或者倒序查库实例
2020/05/19 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
大学生求职中的自我评价
2013/10/01 职场文书
银行职业规划书范文
2013/12/28 职场文书
员工评语大全
2014/01/19 职场文书
运动会标语
2014/06/21 职场文书
企业领导对照检查材料
2014/08/20 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
导游词之山西-五老峰
2019/10/07 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
nginx+lua单机上万并发的实现
2021/05/31 Servers
使用springMVC所需要的pom配置
2021/09/15 Java/Android
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript