zoukankan      html  css  js  c++  java
  • Google Map API使用详解(十)——使用JavaScript创建地图详解(上)

    在网页MyTest1.html中我们已经使用了JavaScript来创建地图,下面总结一下使用JavaScript创建一个地图的核心步骤:

    1、  导入地图API类库。

    <script src="http://ditu.google.com/maps?file=api&hl=zh-CN&v=2&key=YOUR_API_KEY"

    type="text/javascript">

    </script>

    注意这里的参数key,我在以前的文章里已经详细解释过了,如果你只是在本地运行,暂时可以随便使用一段字符串。

     

    2、  在页面的body元素中定义一个地图容器。

    <body>

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

    </body>

    这个地图容器一般使用div元素来定义,如果你愿意,使用p元素或者其他你能想到的元素都可以,但是都应该是块元素,并且必须定义它的id,保证在后面的步骤里能够通过document.getElementById找到这个元素。

    容器的style属性在这里是用来定义这个容器的大小,从而决定所显示地图的大小,当然,如果你在这里不定义也可以通过其他的手段来达到目的,这里暂且先认为这个style的定义和id属性一样也是必不可少的吧。

    其实body元素在这里也有一些特殊的作用,就是保证下一步骤在页面的html元素全部加载结束后再执行。

     

    3、定义你自己的script区域,在里面new一个GMap2对象,并且指定其显示所需的两个基本要素:中心、缩放层次。

    <script type="text/javascript">

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

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

    </script>

    前面已经讲过,GMap2是谷歌地图API中最重要的核心类,对应在页面上显示的地图,所有对地图的操作都需要在已经创建(new)了GMap2对象的基础上才能够进行。在调用GMap2构造函数时使用的参数就是在上一步定义的地图容器(DOM对象)使用document.getElementById来获取的。

    要在页面上正常显示地图,仅仅调用GMap2类的构造函数创建一个GMap2对象还不够,你还需要指定这个GMap2对象的中心,通常也顺便指定它的缩放层次,否则就会默认显示缩放层次为0。

    要指定新创建地图的中心,需要使用地图API里面定义的另一个常用类GLatLng,可以把这个类简单的认为是对地理坐标的封装类,构造函数中第一个参数是南北向的纬度,第二个参数是东西向的经度。

    调用GMap2的setCenter方法设定完地图的中心和缩放层次,这个地图就可以正常显示了。

  • 相关阅读:
    CSS中一个冒号和两个冒号有什么区别
    伪类元素实现可伸缩时间轴
    Gulp实现css、js、图片的压缩以及css、js文件的MD5命名
    for 循环进化史
    细谈sass和less中的变量及其作用域
    Vue2.0源码阅读笔记--双向绑定实现原理
    你所不知道的setTimeout
    前端COOKIE与SESSION的区别
    js移动端向左滑动出现删除按钮
    推荐几款屏幕录制工具(可录制GIF)
  • 原文地址:https://www.cnblogs.com/greywolf/p/2619607.html
Copyright © 2011-2022 走看看