频道导航

Google Maps基础及实例解析

2019-01-05 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了Google Maps基础及实例解析，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

Google Maps 基础

创建一个简单的 Google 地图

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

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

实例

实例效果图（

实例解析

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

应用为什么要声明 HTML5?

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

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

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

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

添加 Google 地图 API Key

在以下实例中第一个

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

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

HTTPS

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

异步加载

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

以下实例使用了 window.onload 来实现页面完全载入后加载 Google 地图。 loadScript() 函数创建了加载 Google 地图 API

定义地图属性

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

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中设置的大小来显示地图的大小，所以我们可以在

元素中设置地图的大小。

创建一个 Map 对象

以上代码使用参数(mapProp)在

元素 (id为googleMap) 创建了一个新的地图。

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

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

实例

加载地图

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

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

原文链接：https://www.f2er.com/js/46747.html

Google google Maps基础地图地图地图地图实例

上一篇：浅谈js的html元素的父节点,子节点下一篇：Google 地图叠加层实例讲解

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获

事件冒泡和事件捕获起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...

作者：前端之家时间：2021-02-22

搞懂js中小数运算精度问题原因及解决办法

js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...

作者：前端之家时间：2021-02-22

搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

什么是跨域跨域：广义的跨域包含一下内容： 1.资源跳转（链接跳转，重定向跳转，表单提...

作者：前端之家时间：2021-02-22

前端对base64编码的理解，原生js实现字符base64编码

@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...

作者：前端之家时间：2021-02-22

搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式

搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ：的缩写，说都能直接说出来：模型，：视图...

作者：前端之家时间：2021-02-22

js判断浏览器是否支持webGL

起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。在各种浏览器上运行...

作者：前端之家时间：2021-02-14

js判断undefined和null

js判断undefined js判断null js判断null和undefined

作者：前端之家时间：2021-02-14

将文字自动转为banner打印形式的工具

http://patorjk.com/software/taag/

作者：前端之家时间：2021-02-14

聊一聊 bootstrap 的轮播图插件

今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...

作者：前端之家时间：2021-02-14

js实现图片无缝循环跑马灯

html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...

作者：前端之家时间：2021-02-14

最新文章