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方法设定完地图的中心和缩放层次,这个地图就可以正常显示了。

  • 相关阅读:
    matplotlib 进阶之origin and extent in imshow
    Momentum and NAG
    matplotlib 进阶之Tight Layout guide
    matplotlib 进阶之Constrained Layout Guide
    matplotlib 进阶之Customizing Figure Layouts Using GridSpec and Other Functions
    matplotlb 进阶之Styling with cycler
    matplotlib 进阶之Legend guide
    Django Admin Cookbook-10如何启用对计算字段的过滤
    Django Admin Cookbook-9如何启用对计算字段的排序
    Django Admin Cookbook-8如何在Django admin中优化查询
  • 原文地址:https://www.cnblogs.com/greywolf/p/2619607.html
Copyright © 2011-2022 走看看