利用 Google API 调用谷歌地图 演示15 - 经纬度
2010-08-06 20:52 音乐让我说 阅读(1314) 评论(2) 编辑 收藏 举报代码如下:
<!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>Demo19-搜索经纬度</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; var infowindow = new google.maps.InfoWindow(); var marker; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(22.95, 113.4); var myOptions = { zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } function codeLatLng() { var input = document.getElementById("latlng").value; var latlngStr = input.split(",", 2); var lat = parseFloat(latlngStr[0]); var lng = parseFloat(latlngStr[1]); var latlng = new google.maps.LatLng(lat, lng); geocoder.geocode({ 'latLng': latlng }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[1]) { map.setZoom(4); marker = new google.maps.Marker({ position: latlng, map: map }); infowindow.setContent(results[1].formatted_address); infowindow.open(map, marker); } else { alert("没有记录"); } } else { alert("Geocoder failed due to: " + status); } }); } </script> </head> <body onload="initialize()"> <div class="search"> 请输入经纬度:<input id="latlng" type="text" value="29,111.7"/><input type="button" value="搜索" onclick="codeLatLng()"/> </div> <div id="map_canvas"> </div> </body> </html>
效果图如下:
谢谢浏览!
作者:音乐让我说(音乐让我说 - 博客园)
出处:http://music.cnblogs.com/
文章版权归本人所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。