zoukankan      html  css  js  c++  java
  • Google Map API使用详解(四)——Google Map基本常识(中)

    6、构造函数说明

    GMap2(container, opts) 在通常是一个 DIV 元素的指定 HTML container 内创建新地图。您也可以通过 opts 参数传递 GMap2Options 类型的可选参数。请注意因为 JavaScript 是松散类型的语言,我们可以不填写构造函数的任何可选参数,此处未这样做。

     

    7、初始化地图

    map.setCenter(new GLatLng(39.970981,116.314108), 16);

    通过 GMap2 构造函数创建地图后,我们需要再做一件事:将其初始化。初始化通过地图的 setCenter() 方法完成。setCenter() 方法要求有 GLatLng 坐标和缩放级别,而且必须先发送此方法,然后再在地图上执行其他任何操作,包括设置地图本身的其他任何属性。

     

    8、加载地图

    <body onload="initialize()" onunload="GUnload()">

    当 HTML 页面显示时,文档对象模型 (DOM) 即会扩展,接收其他外部图像和脚本并将其合并到 document 对象中。为确保我们的地图仅放置在完全加载后的页面上,我们仅在 HTML 页面的 <body> 元素收到 onload 事件后才执行构造 GMap2 对象的函数。这样做可以避免出现不可预期的行为,并使我们可以对地图绘制的方式和时间进行更多控制。

    onload 属性是事件处理程序的示例。Google 地图 API 还提供了大量事件可以用来“监听”状态变化(请参阅地图事件和事件监听器以了解更多信息)。而GUnload() 函数是用来防止内存泄漏的实用工具函数。

     

    9、经度和纬度

    既然现在已经有地图了,我们还需要一种方法来引用地图上的位置。在 Google 地图 API 中,GLatLng 对象提供了此类机制。可以构造一个 GLatLng 对象,按照制图学的惯例以 {度, 度} 的顺序传递参数:

    var myGeographicCoordinates = new GLatLng(myLatitude, myLongitude)

    注意:将“地址”转变为地理点的过程称为“地址解析”,将在“Google 地图 API 服务”部分中详细讨论。

    就像它可用于轻松地引用地理点一样,它也可用于定义对象的地理边界。例如,地图在称为视口的窗口内显示整个世界的当前“窗口”。此视口可以通过四个角上的矩形点来定义。GLatLngBounds 对象提供了这个功能,通过使用分别表示边界框的西南角和东北角的两个 GLatLng 对象定义一个矩形区域来实现。

    GLatLng 对象在 Google 地图 API 中用途广泛。例如,GMarker 对象在其构造函数中具有 GLatLng,并在地图上的指定地理位置放置标记“叠加层(Overlay)”。

    下面的示例(详见MyTest2.html)使用 getBounds() 返回当前视口,然后在地图上的这些边界内随机放置 10 个标记:

    function initialize() {

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

    map.setCenter(new GLatLng(39.970981,116.314108), 16);

    // Add 10 markers to the map at random locations

    var bounds = map.getBounds();

    var southWest = bounds.getSouthWest();

    var northEast = bounds.getNorthEast();

    var lngSpan = northEast.lng() - southWest.lng();

    var latSpan = northEast.lat() - southWest.lat();

    for (var i = 0; i < 10; i++) {

    var point = new GLatLng(southWest.lat() + latSpan * Math.random(),

    southWest.lng() + lngSpan * Math.random());

    map.addOverlay(new GMarker(point));

    }

    }

    注意:有关GMarker对象的详细信息位于叠加层部分中。

     

        (待续)

  • 相关阅读:
    开门(open_door_pick_demo.py)的学习教程(十一)
    Bert源码解读(二)
    Transformer和Bert 的学习(一)
    Android笔记
    JSP 第八周课后作业
    JSPd第七周课后作业 2021/04/14
    JSP第六次课后作业 2021/04/07
    JSP第五次课后作业 2021/03/31
    JSP第四次课后作业 2021/03/24
    JSP第二次课后作业 2021/03/10
  • 原文地址:https://www.cnblogs.com/greywolf/p/2619593.html
Copyright © 2011-2022 走看看