有遮罩层 有标记提示,可以动态查询 地址的 经纬度。下面是代码
<html> <head> <title>google map v3</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var geocoder; var map; function createMap(address){ if(address == null || address=="") return false; geocoder = new google.maps.Geocoder(); if(geocoder){ geocoder.geocode({address:address},function(results,status){ if(status == google.maps.GeocoderStatus.OK){ var location = results[0].geometry.location; var options = { zoom:16, center:location, mapTypeId:google.maps.MapTypeId.ROADMAP }; map =new google.maps.Map(document.getElementById("map_canvas"),options); var marker = new google.maps.Marker({ map: map, position: location, title:address }); var infowindow = new google.maps.InfoWindow({ content: "<div>"+address+"</div>", size: new google.maps.Size(50,20), position:location, pixelOffset:new google.maps.Size(5,5) }); infowindow.open(map); }else { alert("Geocode was not successful for the following reason: " + status); } }); } } function initialize() { createMap("your address e.g: 北京"); } function codeAddress() { var address = document.getElementById("address").value; if (geocoder) { geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); map.setZoom(16); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location, title:address }); var infowindow = new google.maps.InfoWindow({ content: "<span>"+address+"</span>", size: new google.maps.Size(40,10), position: results[0].geometry.location, pixelOffset:new google.maps.Size(5,5) }); infowindow.open(map); } }); } else { alert("Geocode was not successful for the following reason: " + status); } } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width: 800px; height: 600px;margin:0 auto;"></div> <div> <input id="address" type="textbox" value="your address eg:北京"> <input type="button" value="Encode" onclick="codeAddress()"> </div> </body> </html>?