【Google】google地图-根据位置来查找经纬度

效果:

HTML代码:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=gb2312"/>
<title>Get xy via ip</title>  

<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="./js/geoip.js"></script>  

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>  

<script type="text/javascript">
  var geocoder;
  var map;
  var marker;
  var latlng;  

  function initialize(Title,openInfo) {
    var lat =  geoip_latitude();
    var lon = geoip_longitude();
    latlng = new google.maps.LatLng(lat, lon);
    var myOptions = {
      zoom: 12,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl:false,
      streetViewControl: false,
      navigationControlOptions:{position:google.maps.ControlPosition.LEFT,style: google.maps.NavigationControlStyle.DEFAULT}
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);   

    marker = new google.maps.Marker ({
		position: map.getCenter(),
		map: map,
		Draggable:true,
		title: Title
     });  

    var infowindow = new google.maps.InfoWindow({
		 content: openInfo,
         position: myLatlng
		 });  

	infowindow.open(map); 

	google.maps.event.addListener (map, 'idle', function () {
	marker.setPosition(map.center);
	document.getElementById("latitude").value = marker.getPosition().lat();
	document.getElementById("longitude").value = marker.getPosition().lng();  

	});  

     google.maps.event.addListener (marker, 'dragend', function (){
		  map.panTo (marker.getPosition());
		  document.getElementById("latitude").value = marker.getPosition().lat();
		  document.getElementById("longitude").value = marker.getPosition().lng();
	});
}  

 function codeAddress(address) {  

	geocoder = new google.maps.Geocoder();  

	geocoder.geocode( { 'address': address}, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        marker.setPosition(map.center);
		document.getElementById("latitude").value = marker.getPosition().lat();
		document.getElementById("longitude").value = marker.getPosition().lng();
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }
  function GetAddress() {
	var address = document.getElementById("address").value;
	codeAddress(address);
  }  

</script>  

</head>  

<body onload="initialize()">  

<div style="margin: 0 auto;width:930px;height:auto;">

<div id="map_canvas" style="width:930px; height:400px"></div>  

<div height="100px"></div>

<div>
    <input id="address" type="textbox" value="请输入地址...">
    <input type="button" value="查找" onclick='GetAddress()'>
</div>  

<div id="top" style="width:280px; height:200px">
	<table>
		<tr><td style="width:100px;">经度:</td><td><input id="longitude" type="text"  value="" /></td></tr>
		<tr><td style="width:100px;">纬度:</td><td><input id="latitude" type="text"  value="" /></td></tr>
	</table>
</div>  

</div>
</body>
</html>

geoip.js代码:

function geoip_country_code() { return 'CA'; }
function geoip_country_name() { return 'Canada'; }
function geoip_city()         { return 'Montreal'; }
function geoip_region()       { return 'QC'; }
function geoip_region_name()  { return 'Quebec'; }
function geoip_latitude()     { return '45.5000'; }
function geoip_longitude()    { return '-73.5833'; }
function geoip_postal_code()  { return ''; }
function geoip_area_code()    { return ''; }
function geoip_metro_code()   { return ''; }

 

Author: jhonse

Jhonse技术博客: http://blog.jhonse.com

Leave a Reply

Your email address will not be published. Required fields are marked *