代码改变世界

利用 Google API 调用谷歌地图 演示14 - 城市搜索

2010-08-06 20:46  音乐让我说  阅读(1387)  评论(1)    收藏  举报

代码如下：

 

<!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>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>演示17</title>
    <style type="text/css">
        html { height: 100%; }
        body { height: 100%; margin: 0px; padding: 0px; }
        .search { margin:50px auto; width:50%; }
        #map_canvas { width:50%; height: 50%; margin: 50px auto; }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        var geocoder;
        var map;
        function initialize()
        {
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(32, 108);
            var myOptions = {
                zoom: 4,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
        function codeAddress()
        {
            var address = document.getElementById("address").value;
            geocoder.geocode({ 'address': address }, function(results, status)
            {
                if (status == google.maps.GeocoderStatus.OK)
                {
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                }
                else
                {
                    var failReason = "搜索失败！原因可能是：";
                    switch (status)
                    {
                        case "ZERO_RESULTS":
                            failReason += "没有记录";
                            break;
                        default:
                            break;
                    }
                    alert(failReason);
                }
            });
        }
    </script>
</head>
<body onload="initialize()">
    <div class="search">
        请输入城市：<input id="address" type="text" value=""/><input type="button" value="Geocode" onclick="codeAddress()"/>
    </div>
    <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。我也会在最近的日子里继续更新这个系列的，期待您的再次访问。