Google Maps 根本


建立一个简略的 Google 舆图

此刻让咱们建立一个简略的 Google 舆图。

以下是显现了英国伦敦的 Google 舆图:

实例

<!DOCTYPE html> <html> <head> <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&callback=initMap" async defer></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="//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。

http

若是你的利用是宁静的HTTP(http:HTTP Secure)利用,你能够利用 http 来加载 Google 舆图 API:

<script src="//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.type = "text/javascript"; script.src = "//maps.googleapis.com/maps/api/js?key=AIzaSyBzE9xAESye6Kde-3hT-6B90nfwUkcS8Yw&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);