我对GOOGLE MAP API 的一些简单调用

Google Maps API是Google自己推出编程API，可以让全世界对Google Maps有兴趣的程序设计师自行开发基于Google Maps的服务，建立自己的地图网站。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <meta http-equiv="content-type" content="text/html; charset=GB2312"/>

    <title>Google Maps JavaScript API范例1：基本范例</title>

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAPHHzlkwM1BqBR
_nEQeIAVhQj3ceE4HUgKrBDbUpURjZ0
5XGTWRROLJX8OXcBIQLbTTg1TA-gzv-MGw"

            type="text/javascript"></script>

    <script type="text/javascript">

    //<![CDATA[

             //这个范例创建一个地图并定位到中国的位置.

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

             //map.setCenter(new GLatLng(36.94,106.08),4);  //设置初始地图所在位置  
//参数分别为 X坐标,y坐标 俯视尺寸

             //map.setMapType(G_SATELLITE_MAP);//修改地图类型

                         //地图类型有

                         //Google集成支持的3种地图类型分别为：G_NORMAL_MAP,    G_SATELLITE_MAP,   
// G_HYBRID_MAP,还支持自定义地图类型.

             //panTo方法用来将地图变换到指定的中心点，

             //如果指定点在地图上，则地图会平滑的移动到该位置，否则直接跳转到该位置.

             //您能够使用addControl方法向地图添加控件.在这个例子之中，

             //我们添加了系统集成的GSmallMapControl控件和GMapTypeControl控件,第一个允许用户移动和缩放地图，

             //第二个允许用户在地图类型之间切换.

/*

                                GLargeMapControl - 大号平移和缩放控件，位置是左上角。

                                GSmallMapControl - 小号平移和缩放控件，位置是左上角。

                                GSmallZoomControl - 小号缩放控件，位置是左上角。

                                GScaleControl - 地图比例尺。

                                GOverviewMapControl - 位于屏幕右下角、可以收起来的缩略图。

*/

                            function load() {

                              if (GBrowserIsCompatible()) {

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

                                    map.setCenter(new GLatLng(34.45221847282654,127.28515625),4);

                                    window.setTimeout(function() {

                                  map.panTo(new GLatLng(35.746512259918504,78.90625)); }, 5000);
  //参数说明 转到的坐标 延时时长

                                   map.addControl(new GSmallMapControl());

                                   map.addControl(new GMapTypeControl());

                            map.addControl(new GOverviewMapControl());    //添加右下脚缩略图

                                  map.openInfoWindow(map.getCenter(),document.createTextNode("好运北京"));
  //打开气泡提示窗口

                         // 随机地在地图上添加 10 个标注

                             var bounds = map.getBounds();

                             var southWest = bounds.getSouthWest();

                             var northEast = bounds.getNorthEast();

                             var lngSpan = northEast.lng() - southWest.lng();

                             var latSpan = northEast.lat() - southWest.lat();

                         for (var i = 0; i < 10; i++) {

           var point = new GLatLng(southWest.lat() + latSpan * Math.random(),southWest.lng() + 
lngSpan * Math.random());

                              map.addOverlay(new GMarker(point));}// 添加一个由 5 个随机点连成的折线，

把随机点按其经度排序以避免折线相交

                              var points = [];

                              for (var i = 0; i < 5; i++) {

                                   points.push(new GLatLng(southWest.lat() + latSpan * Math.random(),southWest.lng()
 + lngSpan * Math.random()));

                                   points.sort(function(p1, p2) {  return p1.lng() - p2.lng();});
map.addOverlay(new GPolyline(points));

                        GEvent.addListener(map, "click", function(marker, point) {

                             if (marker)

                             {    map.removeOverlay(marker);

                             } else

                                  {    map.addOverlay(new GMarker(point)); }

});

    //]]>

    </script>

  </head>

  <body onload="load()" onunload="GUnload()">

      <div>

       <div id="map" style="width: 750px; height: 550px">

           </div>

 </div> </body>

</html>

再详细的使用　还在　研究中　呵呵

posted @ 2007-08-12 17:46 桂圆阅读(4055) 评论(2) 编辑收藏举报

刷新页面返回顶部

桂圆的编程世界

桂圆烟雨任平生

我对GOOGLE MAP API 的一些简单调用

公告