google maps helloWorld
2012-09-23 00:38
302 查看
任何 Google Maps 第 3 版 API 应用程序中的基本元素都是“地图”本身。本文介绍了
https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-CN#api_key
以下网页显示了以澳大利亚新南威尔士的悉尼为中心的一个地图:
注意:css中关于body的设置不能少,否则什么都没有。我就是因为这个问题搞了1个小时。
如果将body 的height 设置为50%,页面只显示一半。
即使在这个简单的示例中,也有几点需要注意:
我们使用了
使用
我们创建一个名为“map_canvas”的
创建 Javascript 对象常量以保存若干地图属性。
编写 Javascript 函数以创建“map”对象。
我们从
将您的应用程序声明为 HTML5
我们建议您在自己的网络应用程序内声明一个真实的
当前的大部分浏览器会以“标准模式”呈现使用此
请注意,某些在兼容模式下工作的 CSS 在标准模式中是无效的。具体地说,所有以百分比表示的尺寸必须继承自父块元素,而如果这些父元素中的某个父元素没有指定尺寸,则系统会将其尺寸假定为 0x0 像素。为此,我们加入了以下
该 CSS 声明表示地图容器
载入 Google Maps API
此标头中的
请注意,我们还需要设置
要在网页上显示地图,我们必须为其留出一个位置。通常,我们的做法是创建一个名为
在上述示例中,我们定义了名为“map_canvas”的
要初始化地图,我们需要先创建一个包含地图初始化变量的
我们还设置了初始缩放级别,并将
与 Google Maps 第 2 版 API 不同的是,第 3 版中没有设置默认地图类型。您必须明确设置一个初始地图类型,才能查看相应的图块。
创建新的地图实例时,您需要在网页中指定一个
此代码可定义一个名为
google.maps.Map( opts?)
要在页面加载完毕后再加载 Maps JavaScript API,方法十分简单:您只需插入自己的
以下代码可指示应用程序在页面完全加载后再加载 Maps API(使用
google.maps.Map基础对象的用法和地图操作的基础知识。(如果您已经学习了第 2 版的辅导手册,您会发现,这两版辅导手册中的很多内容都是相同的。但两者之间也会有些区别,因此,请仔细阅读本文。)
https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-CN#api_key
以下网页显示了以澳大利亚新南威尔士的悉尼为中心的一个地图:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } </style> <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=set_to_true_or_false"> </script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>
注意:css中关于body的设置不能少,否则什么都没有。我就是因为这个问题搞了1个小时。
如果将body 的height 设置为50%,页面只显示一半。
即使在这个简单的示例中,也有几点需要注意:
我们使用了
<!DOCTYPE html>声明将应用程序声明为 HTML5。
使用
script标记来加入 Maps API JavaScript。
我们创建一个名为“map_canvas”的
div元素来承载该地图。
创建 Javascript 对象常量以保存若干地图属性。
编写 Javascript 函数以创建“map”对象。
我们从
body标记的
onload事件初始化该地图对象。
将您的应用程序声明为 HTML5
我们建议您在自己的网络应用程序内声明一个真实的
DOCTYPE。在本文的这些例子中,我们使用了简单的 HTML5
DOCTYPE将应用程序声明为 HTML5,如下所示:
<!DOCTYPE html>
当前的大部分浏览器会以“标准模式”呈现使用此
DOCTYPE声明的内容,这意味着您的应用程序应当具有更强的跨浏览器适应能力。
DOCTYPE还被设计为可适度降级;无法理解它的浏览器会将它忽略,并使用“兼容模式”来显示内容。
请注意,某些在兼容模式下工作的 CSS 在标准模式中是无效的。具体地说,所有以百分比表示的尺寸必须继承自父块元素,而如果这些父元素中的某个父元素没有指定尺寸,则系统会将其尺寸假定为 0x0 像素。为此,我们加入了以下
<style>声明:
<styletype="text/css"> html {height:100%} body {height:100%;margin:0px;padding:0px} #map_canvas {height:100%} </style>
该 CSS 声明表示地图容器
<div>(名称为
map_canvas)应当占据 HTML 主体的完整高度。请注意,我们还应当明确声明
<body>和
<html>的相应百分比。。
载入 Google Maps API
<html> <head> <metaname="viewport"content="initial-scale=1.0, user-scalable=no"/> <scripttype="text/javascript"src="https://maps.google.com/maps/api/js?sensor=set_to_true_or_false"> </script>
http://maps.google.com/maps/api/js网址指向 Javascript 文件所在的位置,该文件会载入使用第 3 版 Google Maps API 所需的全部符号和定义。您的网页必须包含指向该网址的
script标签。
此标头中的
<meta>标签会指定如下内容:即应当以全屏模式显示该地图,且用户不能调整地图尺寸。(有关详细信息,请参见开发移动设备部分。)
请注意,我们还需要设置
sensor参数,以指明此应用程序是否使用传感器确定用户的位置。在此示例中,我们将该参数设为变量“set_to_true_or_false”,用于强调您必须将该值显式设为
true或
false。
地图 DOM 元素
<divid="map_canvas"style="width:100%;height:100%"></div>
要在网页上显示地图,我们必须为其留出一个位置。通常,我们的做法是创建一个名为
div的元素,然后在浏览器的文档对象模型 (DOM) 中获取此元素的引用。
在上述示例中,我们定义了名为“map_canvas”的
<div>并使用样式属性设置其大小。请注意,该尺寸已设置为“100%”,这将会展开地图,使之符合移动设备的屏幕尺寸。您可能需要根据浏览器的屏幕尺寸和填充区域调整这些值。请注意,地图总是会根据其中所包含的元素的大小决定其本身的尺寸,因此,您必须始终在
<div>上显式设置一个适用的尺寸。
地图选项
var myLatlng =new google.maps.LatLng(-34.397,150.644); var myOptions ={ zoom:8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
要初始化地图,我们需要先创建一个包含地图初始化变量的
Map options对象。该对象不是构建出来的,而是以对象常量的形式创建出来的。由于我们要将地图的中心设定为某一特定的点,因此,我们还需要创建一个
latlng值,以保存此位置信息并将其传递到地图的选项中。有关指定位置的详细信息,请参阅下面的 纬度和经度部分。
我们还设置了初始缩放级别,并将
mapTypeId设置为
google.maps.MapTypeId.ROADMAP。系统支持以下类型:
ROADMAP,用于显示 Google Maps 默认的普通二维图块。
SATELLITE,用于显示拍摄的图块。
HYBRID,用于同时显示拍摄的图块和突出特征(道路、城市名)图块层。
TERRAIN,用于显示自然地形图块,自然地形图块中会显示高度和水体特征(山脉、河流等)。
与 Google Maps 第 2 版 API 不同的是,第 3 版中没有设置默认地图类型。您必须明确设置一个初始地图类型,才能查看相应的图块。
google.maps.Map
- 基本对象
var map =new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Map类是表示地图的 JavaScript 类。此类的对象定义了网页上的单个地图。(您可以创建此类的多个实例,每个对象都将在网页上定义一个单独的地图。)我们使用 Javascript
new操作符创建此类的一个新实例。
创建新的地图实例时,您需要在网页中指定一个
<div>HTML 元素作为地图的容器。HTML 节点是 Javascript
document对象的子对象,而且我们通过
document.getElementById()方法获得该元素的引用。
此代码可定义一个名为
map的变量,然后将该变量分配给新的
Map对象,同时将该变量传递到在
myOptions对象常量内定义的选项中。这些选项将会用于初始化地图的属性。
Map()函数称为“构造函数”,其定义如下:
google.maps.Map( opts?)
异步加载 JavaScript API
一般来说,如果您是通过以下方法加载页面的话,那么 JavaScript Maps API 会在页面加载时立即加载:即使用<script>标记加入 API 并在脚本加载完毕后执行应用程序 JavaScript 代码。然而,当解析该 JavaScript 时,您的浏览器可能不会在页面上呈现其他内容。大部分情况下,这一延迟并不会引起注意,但是您可能会希望在页面加载完毕后再加载 Maps API JavaScript 代码,或者根据需要加载 Maps API JavaScript。
要在页面加载完毕后再加载 Maps JavaScript API,方法十分简单:您只需插入自己的
<script>标记作为对
window.onload事件的响应即可;但您还需要指示 Maps JavaScript API 引导程序在 Maps JavaScript API 代码完全加载后再执行应用程序代码。要实现此目的,您可以使用
callback参数。该参数是在 API 加载完毕时,函数要执行的变量。
以下代码可指示应用程序在页面完全加载后再加载 Maps API(使用
window.onload),并在该页面中将 Maps JavaScript API 写入
<script>标记。此外,我们还通过向 Maps API 引导程序传递
callback=initialize来指示该 API 仅在自身完全加载后再执行
initialize()函数:
function initialize() { var myLatlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } function loadScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize"; document.body.appendChild(script); } window.onload = loadScript;
相关文章推荐
- Google 地图的“Hello, World”
- Google API Hello World
- Google App Engine helloworld 入门教程
- [Google App Engine] Hello, world!
- [Google App Engine] Hello, world!
- google/protobuf hello world
- 结合Google Maps API和GeoIP/新浪/搜狐接口的IP地理信息可视化查询
- 在申请google maps api中关于获取Getting the MD5的问题
- 教程:使用 Xcode 编写 Mac OS X 下的"Hello, World!"
- Qt学习之路(3):Hello, world!(续)
- Maven的核心笔记(2)原生:HelloWorldMaven
- Windows mobile 开发入门—第一个程序"hello world",链接调试,模拟器的使用
- nodejs express hello world
- SpringBoot HelloWorld
- Hello World for U
- Drive More Search Traffic to Your Maps API Site by Including KML Files in a Sitemap——Google 地图 API 文档之五
- 解剖Nginx·模块开发篇(2)ngx_http_hello_world_module 模块基本结构定义
- Java RMI HelloWorld
- MongoDB hello world example
- Hello,world!