代码改变世界

利用 Google API 调用谷歌地图 演示1

2010-08-06 20:10  音乐让我说  阅读(2608)  评论(3)  编辑  收藏  举报

代码如下：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>演示1</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html { height: 100%; }
        body { height: 100%; margin: 0px; padding: 0px; }
        #map_canvas { width:50%; height: 50%; margin: 50px auto; }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&key=ABQIAAAAtzdEfkm0e6fFv-EqYY-XJRQdNSJsfUEFgMWL1fb2TrZ8t0A2pRQ10wAqRsmxpdHzRsHswMJAFavZ6g"></script>
    <!-- sensor 参数表示是否检测用户的地理位置 -->
    <script type="text/javascript">
        function initialize()
        {
            var latlng = new google.maps.LatLng(22.95, 113.4); /* 广州市番禺区，分别为纬度和经度，常德的经纬度为：29,111.7 */
            var myOptions = {
                zoom: 12,    /* zoom 的取值范围为：0-19，表示范围最广，19表示范围最小但同时最详细 */
                center: latlng,
                //disableDefaultUI: true,     /* 是否禁用缩放滚动条和“地图”、“卫星”、“混合”、“地形”，默认为false */
                mapTypeControl: true,           /* 是否出现“地图”、“卫星”、“混合”、“地形”，默认为true */
                mapTypeControlOptions:
                {
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,    /* 以下拉框的形式显示“地图”、“卫星”、“混合”、“地形”，默认值为“google.maps.MapTypeControlStyle.HORIZONTAL_BAR” */
                    position: google.maps.ControlPosition.RIGHT        /* 显示的位置，默认为RIGHT */
                },
                navigationControl: true,        /* 是否启用缩放滚动条，默认为true */
                navigationControlOptions:
                {
                    style: google.maps.NavigationControlStyle.SMALL,     /* 已最简单的形式显示缩放滚动条 */
                    position: google.maps.ControlPosition.TOP_LEFT     /* 显示的位置 */
                },
                scaleControl: true,          /* 是否等比例缩放 */
                scaleControlOptions: 
                {
                     /* position: google.maps.ControlPosition.TOP_LEFT */
                },
                mapTypeId: google.maps.MapTypeId.ROADMAP        /* google.maps.MapTypeId.TERRAIN 表示“地形” */
                /*
                mapTypeControlOptions: 
                {
                     mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN] 
                }
                */
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        } 
    </script>
</head>
<body onload="initialize()">
    <div id="map_canvas">
    </div>
</body>
</html>

 

效果图如下：

 

已修改：本人最近的《利用 Google API 调用谷歌地图》系列在百度和谷歌还蛮受欢迎的，当然要感谢您的支持，o(∩_∩)o ，查看搜索关键字，大多数是“调用谷歌地图”。之所以起这个名字，是因为本人在项目中急需调用谷歌地图，可在百度和谷歌上却搜不到自己想要的，而且调用的Google Maps 的版本大多是V2，而不是最新的 V3 。我没有贬低其他人的意思，请大家不要误会。后来想想还是自己花时间看 Google API 好了，于是一步一步的阅读讨厌的 English ，本人英语不好，只是大概能看懂，而且还是借助了金山词霸，然后按照它上面的例子做成我自己的例子，在后来就干脆写博客贴出来，看看能不能帮助您一点，由于本人比较忙，平时也没有多少时间来组织语言来写说明和备注（PS：语文也不好，哈哈），请您体谅。如果您有什么不明白的，欢迎您和我一起来讨论，QQ：403350327，也可以发邮件给我：403350327@qq.com。俺的博客地址也非常好记：http://music.cnblogs.com。我也会在最近的日子里继续更新这个系列的，期待您的再次访问。