利用 Google API 调用谷歌地图 演示14 - 城市搜索
2010-08-06 20:46 音乐让我说 阅读(1369) 评论(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。我也会在最近的日子里继续更新这个系列的,期待您的再次访问。
作者:音乐让我说(音乐让我说 - 博客园)
出处:http://music.cnblogs.com/
文章版权归本人所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。