网络编程
位置：首页>> 网络编程>> Asp编程>> 10分钟学会Google Map API （一）

10分钟学会Google Map API （一）

　　发布时间：2009-06-07 18:17:00　

标签：google,map,api

前几天玩了玩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;
         }

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com