效果图如下:
javascript代码:
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 无标题文档 </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script type="text/javascript"> var geocoder; var map; var query = "香港 湾仔 维多利亚公园"; var display = "<b>单位:</b> 维多利亚公园"; function initialize() { geocoder = new google.maps.Geocoder(); var myOptions = { zoom: 17, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); codeAddress(); } function codeAddress() { var address = query; 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 }); var infowindow = new google.maps.InfoWindow({ content: "<b>地址:</b>" + address + "<br>" + display }); infowindow.open(map, marker); } else { alert("未能解析该地址的原因: " + status); } }); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="500px; height:400px"> </div> </body>