【w3c school Google Maps API】第二讲 翻译 Google Maps Basic

2016-07-07 14:55 来源：www.chinab4c.com 作者：ecshop专家

创建一个基本的GOOGLE地图

现在我们准备创建一个基本的google
下面的例子创建了一个以英国伦敦为中心的google地图
<!DOCTYPE html>
<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>


实例解答 - 一步步来

接下来的内容将一句一句解答这个例子。

为什么像HTML5一样宣称应用程序?
<!DOCTYPE html>

许多浏览器在标准模式里会使用HTML5 doctype来加载页面，这意味着你的应用程序和浏览器更有兼容性。
另外,浏览器不识别它装会忽略，使用"quirks mode"显示内容。

添加Google Maps API Key

在上面例子中第一个<script>是必需要求的，它包含了Google Maps API

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

在参数中写入你的API key(key=YOUR_API_KEY).

sensor的参数是必填的，它指示应用程序是否有使用sensor(比如GPS设备)来确实用户的位置，值设成true或falsh

HTTPS
如果你的应用程序是一个加密的HTTP应用程序，则在HTTPS上加载Google Maps API
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>


不同步加载
在页面加载完后来加载Google Maps API也是可行的。
下面的例子在页面完全加载后，使用window.onload来加载Google Maps API。
loadScript()创建Google Maps API <script>标签
callback=initialize参数加到URL的最后只为了在API完全加载后，执行initialize()函数

例子

function loadScript()
{
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize"; document.body.appendChild(script);
}

window.onload = loadScript;

定义地图的属性
为了初始化一个地图，我们首先创建地图属性工程来为这个地图定义一些属性

var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

Center
center属性指出这个地图的中心在哪里。
创建LatLng工程来确定在一个指定位置地图的中心点在哪里.
传坐标值:latitude, longitude

Zoom
zoom属性用于初始化地图的缩放


MapTypeId
The mapTypeId property specifies the initial map type to display.
mapTypeId属性用于初始化时地图的类型

支持下面的地图类型

ROADMAP (normal, default 2D map)
SATELLITE (photographic map)
HYBRID (photographic map + roads and city names)
TERRAIN (map with mountains, rivers, etc.)

哪里显示地图
使用<div>来显示google地图

<div id="googleMap" style="width:500px;height:380px;"></div>
注意：图地都是从div中得到大小的，所以，要在<div>中不停地设定大小值。

创建地图工程

var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);

上面代码使用mapProp传过来的参数,在<DIV>(googleMap)中创建一个新地图
提示:在一个页面中创建好几张地图，只需要添加新的map工程

下面的例子在一个页面中定义四经地图(四张地图不同类型)


Example

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);


加载地图
执行initialize()函数

google.maps.event.addDomListener(window, 'load', initialize);


以上内容由淘宝聚划算http://www.juhuasuantuangou.com/翻译整理
原文请参考http://w3schools.com/googleAPI/google_maps_basic.asp