Google Maps API指南:在网页中嵌入GMaps

看一个简单的示例
服务器君一共花费了352.070 ms进行了7次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

初步了解 Google Maps API 的最简单方法就是看一个简单的示例。以下网页显示了中国地图:

程序演示

代码

<!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=false">
</script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(36.1733569352216, 106.171875);
    var myOptions = {
      zoom: 4,
      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>

即使在这个简单的示例中,也有几点需要注意:

  1. 我们使用了 <!DOCTYPE html> 声明将应用程序声明为 HTML5。
  2. 使用 script 标记来加入 Maps API JavaScript。
  3. 我们创建一个名为“map_canvas”的 div 元素来承载该地图。
  4. 创建 Javascript 对象常量以保存若干地图属性。
  5. 编写 Javascript 函数以创建“map”对象。
  6. 我们从 body 标记的 onload 事件初始化该地图对象。

载入 Google Maps API

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="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。

当通过 http://maps.google.com/maps/api/js 网址加载 JavaScript Maps API 时,您还可以选择使用 libraries 参数来加载其他库。库是向主 JavaScript API 提供其他功能的代码的模块,但只有在您专门请求时才会加载。

地图选项

要初始化地图,我们需要先创建一个包含地图初始化变量的 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 ) 使用 opts 参数中传递的可选参数来创建新地图。

纬度和经度

我们还需要一种引用各种地图位置的方法。在 Google Maps API 中,google.maps.LatLng 对象提供了此类机制。您可以构建一个 LatLng 对象,以 {纬度, 经度} 的顺序传递其参数:

var myLatlng = new google.maps.LatLng(myLatitude, myLongitude)

请注意:将“地址”转变为地理地点的过程叫做“地址解析”。此版本的 Google Maps API 可支持地址解析。

LatLng 对象在 Google Maps API 中用途广泛。例如,google.maps.Marker 对象会在其构造函数中应用 LatLng,并在地图上所指定的地理位置上添加标记 叠加层。

缩放级别

如果要将包含完整地球的地图作为单幅图片提供,则要么需要极大的地图,要么需要分辨率极低的小型地图。因此,Google Maps 和 Maps API 内的地图图像被分割为地图“图块”和“缩放级别”两部分。在低缩放级别下,一小组地图图块就可以覆盖广阔的区域;而在高缩放级别下,图块的分辨率会更高,覆盖的区域则会更小。

要指定地图的显示分辨率,您可以设置 Map 的 zoom 属性,其中缩放 0 相当于将地球地图缩小到最低程度,而较高的缩放级别会将地图放大到较高的分辨率。

延伸阅读

此文章所在专题列表如下:

  1. Google Maps API指南:在网页中嵌入GMaps
  2. Google Maps API指南:设置地图选项
  3. Google Maps API指南:地图标记与信息窗口
  4. Google Maps API指南:地图事件
  5. Google Maps API指南:点击添加标注
  6. Google Maps API指南:添加多个随机标注

本文地址:http://www.nowamagic.net/librarys/veda/detail/1687,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/1687

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《人月神话》 弗雷德里克·布鲁克斯 (作者), 汪颖 (译者)

《人月神话》原文:The Mythical Man-Month: The Essays on Software Engineering, 2nd ed.在软件领域,很少能有像《人月神话》一样具有深远影响力并且畅销不衰的著作。Brooks博士为人们管理复杂项目提供了最具洞察力的见解。既有很多发人深省的观点,又有大量软件工程的实践。本书内容来自Brooks博士在IBM公司System/360家族和OS/360中的项目管理经验。该书英文原版一经面世,即引起业内人士的强烈反响,后又译为德、法、日、俄中等多种语言,全球销量数百万册。确立了其在行业内的经典地位。

更多计算机宝库...