10分钟学会Google Map API (一)

时间:2009-06-07 18:17:00 

前几天玩了玩Google的Map API,感觉还不错,很简单。但凡有过任何编程经验的同学,看完以下的教程,都可以在10分钟内掌握它的主要功能。另外我还做了个简单的小例子,有兴趣的话,请参见 http://sunjian100.googlepages.com/map.html :]

    第一步:
    去 http://www.google.com/apis/maps/signup.html 申请一个KeyID

    第二步:
    在HTML的<title></title>之间加上对MapAPI函数库的引用,

    <script src="http://maps.google.com/maps?file=api&v=2&key= YourKeyID" type="text/javascript"></script>
    第三步:
    在HTML的<body></body>之间的任意位置加上一个名为map的DIV,

    <div id="map" style="width: 700px; height: 560px" align="center"></div>
    第四步:
    在名为map的DIV后面,加上GMap类的实例,
        

<script type="text/javascript"> 
        //创建GMap类的实例
        var map = new GMap(document.getElementById("map"));
        //添加一个控制条
        map.addControl(new GSmallMapControl());
        //设置显示模式为卫星影像
        map.setMapType(G_SATELLITE_TYPE);
        //设置中心点经纬度(上海)和缩放系数,并显示
        map.centerAndZoom(new GPoint(121.4838, 31.2517), 4);
        </script>
    第五步:
    随机增加10个标记点,

    var bounds = map.getBoundsLatLng();
    var width = bounds.maxX - bounds.minX;
    var height = bounds.maxY - bounds.minY;
    for (var i = 0; i < 10; i++) {
        var point = new GPoint(bounds.minX + width * Math.random(),
                 bounds.minY + height * Math.random());
        var marker = createMarker(point, i + 1);
        //添加标记点
        map.addOverlay(marker);
   }

    第六步:
    添加事件响应,
        

function createMarker(point, number) 
        {
           var marker = new GMarker(point);

           // Show this marker's index in the info window when it is clicked.
           var html = "Marker #<b>" + number + "</b>";
           GEvent.addListener(marker, 'click', function() {
           marker.openInfoWindowHtml(html);});

           return marker;
         }

标签:google,map,api
0
投稿

猜你喜欢

  • Python matplotlib底层原理解析

    2021-05-11 07:05:29
  • Python中的Function定义方法第1/2页

    2021-05-10 20:33:49
  • pytorch collate_fn的基础与应用教程

    2021-06-03 02:55:57
  • Python3的socket使用方法详解

    2021-11-08 13:27:48
  • pydev使用wxpython找不到路径的解决方法

    2023-02-23 05:01:01
  • 如何编制一个产生随机密码的函数?

    2009-11-08 19:06:00
  • python中的Pytorch建模流程汇总

    2022-04-26 19:02:14
  • php cli换行示例

    2024-05-03 15:50:59
  • Python Unittest自动化单元测试框架详解

    2023-09-13 23:13:56
  • PDO::getAttribute讲解

    2023-06-06 02:58:22
  • Python实现在Excel文件中写入图表

    2023-11-20 17:13:03
  • SQL Server 空值处理策略[推荐]

    2024-01-15 17:07:41
  • python中利用队列asyncio.Queue进行通讯详解

    2023-02-13 03:52:58
  • 一文带你上手Vue新的状态管理Pinia

    2024-05-09 15:11:33
  • numpy.concatenate函数用法详解

    2022-04-09 06:18:52
  • 通过底层源码理解YOLOv5的Backbone

    2023-07-15 20:37:01
  • django模板加载静态文件的方法步骤

    2023-04-12 17:13:26
  • Python利用逻辑回归分类实现模板

    2023-11-14 07:02:05
  • Python面向对象中类(class)的简单理解与用法分析

    2021-01-05 00:07:37
  • Pycharm debug调试时带参数过程解析

    2023-02-27 06:21:00
  • asp之家 网络编程 m.aspxhome.com