Dreamweaver教程 FrontPage教程 Flash教程 CSS教程
  • javascript教程
  • 当前位置:教程 > 网页制作 > javascript教程 > 正文

    10分钟学会Google Map API (一)

    编辑:教程网 来源:网络 时间:2011年07月02日 16:43

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


  • 原文来自 教程网 转载请注明:http://www.websmill.com/wangye/javascript/8294.html

  • 上一篇:单行Javascript实现Memoization
  • 下一篇:javascript Math对象