Google Maps 根底


创立一个简略的 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>

测验一下 »


实例解析

咱们以以上实例来解析 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彻底载入后履行:

实例

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;

测验一下 »


界说地图特点

在初始化地图前,咱们需求先创立一个 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) 创立了一个新的地图。

提示:假如想在页面中创立多个地图,你只需求增加新的地图目标即可。

以下实例界说了四个地图实例 (四个地图运用了不同的地图类型):

实例

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() 函数来初始化 Map 目标,这样能够保证在页面彻底载入后再加载 Google 地图:

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