Google maps API开发(一)(转)

一、加载Google maps API

<script type="text/javascript"

       src="http://ditu.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"></script>

您可以到http://code.google.com/intl/zh-CN/apis/maps/signup.html注册申请自己的API

二、加载简单的Google地图

1、  加载Google地图

//声明一个GMap2全局变量

var map;

function load()

{

    //检查浏览器的兼容性.

    if (GBrowserIsCompatible())

    {

        map = new GMap2(document.getElementById("map")); //加载地图

        map.addControl(new GLargeMapControl()); //增加全功能控件

        map.addControl(new GMapTypeControl()); //设置地图类型

        map.enableScrollWheelZoom(); //设置地图支持滚轮

        map.setCenter(new GLatLng(39.990168, 116.295304), 10); //设置地图的中心坐标

        map.enableDoubleClickZoom(); //开启双击google map会自动放大.

        map.enableScrollWheelZoom(); //开启滚动鼠标自动放大和缩小.

          //

    }

}

2、  添加一个创建GMarker的方法

function createMarker(baseIcon, point, html)

{

    var icon = new GIcon(baseIcon);

    var marker = new GMarker(point, icon);

    GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); });

    return marker;

}

3、  调用这个GMarker方法

var icon = new GIcon(G_DEFAULT_ICON);

var point = new GPoint(116.429114, 39.934322);

var html = '<div ><font color="blue">HelloWorld!</font></div>';

var marker = createMarker(icon, point, html);

map.addOverlay(marker);

这样一个简单的HelloWorld就显示出来了

通过这个例子我们可以了解到GMap2、GMarker、GIcon这几个核心类的基本应用

最后看看我截得图:

 

 

源文件下载

这几天整理了一下V3的版本,V3相比V2还是有很大进步的,比如烦人的api引用,发布的时候非常不爽;清爽的api对象,比以前精简不少对象,但是功能却没有打折扣……还有很多等着我们去挖掘,总之是

用的非常爽,废话不多说了,实现同样的功能V3的代码如下:

 <html>

                <head>

                <title></title>

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

                    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

                                <script type="text/javascript">

                                    var map;

                                    function load() {

                                        var myLatlng = new google.maps.LatLng(39.934322, 116.429114);

                                        var myOptions = {

                                            //这里的参数可以为多个参数,具体参考MapOptions对象

                                            zoom: 5,

                                            center: myLatlng,

                                            mapTypeId: google.maps.MapTypeId.ROADMAP

                                        };

                                        map = new google.maps.Map(document.getElementById("map"), myOptions);

                                        var marker = new google.maps.Marker({

                                        //可以为多个参数,具体参考MarkerOptions对象

                                            map: map,

                                            position: myLatlng

                                        });

                                        google.maps.event.addListener(marker, 'click', function(event) {

                                            //这里的infoWindow的参数可以为多个对象,具体可以参考InfoWindowOptions对象

                                            var html = '<div ><font color="blue">HelloWorld!</font></div>';

                                            var infowindow = new google.maps.InfoWindow({ content: html });

                                            infowindow.open(map, marker);

                                        });

                                    }

    </script>

                </head>

                <body onload="load()">

                                                <table border="2" id="table1" bordercolor="#FF0000">

                                                <tr>

                                                                <td>

                                <div id="map" style="width:800px; height:480px"></div>

                                                                </td>

                                                </tr>

                                </table>

                </body>

</html>

 

posted @ 2013-10-18 16:04  幻星宇  阅读(255)  评论(0编辑  收藏  举报