• Google Map API使用详解(三)——Google Map基本常识(上)


    1、简介

    任何 Google Maps API 应用程序中的基础元素都是“地图”本身。本文档讨论 GMap2 基础对象的用法和地图操作的基础知识。

     

    2Google Map“Hello, World”

    开始学习 Google 地图 API 最简单的方式是看一个简单的示例。网页MyTest1.html显示了以中国人民大学为中心的 400x400 的地图。

    即使在此简单的示例中,也需要注意五点:

    (1)使用 script 标签包含 Google 地图 API JavaScript。

    (2)创建名为“mapContainer”的 div 元素来包含地图。

    (3)编写 JavaScript 函数创建“map”对象。

    (4)将地图的中心设置为指定的地理点。

    (5)从 body 标签的 onload 事件初始化地图对象。

    下面说明了这些步骤。

     

    3、加载 Google Map API

    <script src=http://ditu.google.cn/maps?file=api&v=2&key=YOUR_API_KEY&sensor=true_or_false type="text/javascript">

    </script>

    http://ditu.google.cn/maps?file=api&v=2&key=YOUR_API_KEY网址指向包含使用 Google 地图 API 所需所有符号和定义的 JavaScript 文件的位置。您的页面必须包含指向此网址的 script 标签,使用注册 API 时收到的密钥。在此示例中,该密钥显示为“YOUR_API_KEY”。请注意,我们也传递 sensor 参数以指明此应用程序是否使用传感器来确定用户位置。在此示例中,我们将其设为变量“true_or_false”以强调您必须显式地将此值设置为 true 或 false。

     

    4、地图 DOM 元素

    <div id="mapContainer" style=" 400px; height: 400px"></div>

    要让地图在网页上显示,必须为其留出一个位置。通常,我们通过创建名为 div 的元素并在浏览器的文档对象模型(DOM)中获取此元素的引用执行此操作。

    在上述示例中,我们定义名为“mapContainer”的 div,并使用样式属性设置其尺寸。地图会自动使用容器尺寸调整自身的尺寸,除非使用构造函数中的 GMapOptions 显式地为地图指定尺寸。

     

    5GMap2 --基本对象

    var map = new GMap2(document.getElementById("mapContainer"));

    GMap2 类是表示地图的 JavaScript 类。此类的对象在页面上定义单个地图(可以创建此类的多个实例,每个对象将在页面上定义一个不同的地图)。我们使用 JavaScript new 操作符创建此类的一个新实例(对象)。

    当创建新的地图实例时,在页面中指定一个 DOM 节点(通常是 div 元素)作为地图的容器。HTML 节点是 JavaScript document 对象的子对象,而且我们通过 document.getElementById() 方法获得该元素的引用。

    此代码定义了一个变量(名为map),并将新GMap2对象赋值给该变量。函数GMap2() 称为“构造函数”,其定义如下所示:

    (待续)

  • 相关阅读:
    假期周总结报告(五)
    java 原码反码及补码 总结
    java ==与equals()方法的总结
    java String 类型总结
    java 全局变量 的小结
    java static语句的总结
    ATM开学测试(未完成)
    第七周学习进度总结
    第六周学习进度总结
    第五周学习进度总结
  • 原文地址:https://www.cnblogs.com/greywolf/p/2619588.html
Copyright © 2020-2023  润新知