关于根据地址获取经度和纬度
关于根据地址获取经度和纬度谈谈自己刚做的一个小模块
<!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="http://j.maxmind.com/app/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() {
var lat = geoip_latitude();
var lon = geoip_longitude();
//alert lat;
latlng = new google.maps.LatLng(lat, lon);
//latlng = new google.maps.LatLng(39.86, 116.36);
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);
//codeAddress('beijing');
//document.getElementById("ipadd").value = GetLocalIPAddress();
marker = new google.maps.Marker ({
//icon: 'http://123.138.29.9:9090/images/pic.gif',
position: map.getCenter(),
map: map,
Draggable:true,
title: "我的位置"
});
var infowindow = new google.maps.InfoWindow({ content: "我的位置",maxWidth: 50 });
// 平移 缩放 改变图标
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();
//infowindow.open(map,marker);
});
// 图标拖动
google.maps.event.addListener (marker, 'dragend', function () {
map.panTo (marker.getPosition());
//map.setcenter(marker.getPosition());
document.getElementById("latitude").value = marker.getPosition().lat();
document.getElementById("longitude").value = marker.getPosition().lng();
});
}
function codeAddress(address) {
//var address = 'beijing';//document.getElementById("address").value;
geocoder = new google.maps.Geocoder();
alert(address);
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();
//alert(results[0].geometry.location.lat());
//var marker = new google.maps.Marker({
// map: map,
// position: results[0].geometry.location
//});
} 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 id="top" style="width:10px; height:10px">
<input id="longitude" type="text" value=""></input>
<input id="latitude" type="text" value=""></input>
</div>
<div>
<input id="address" type="textbox" value="sanyuanqiao">
<input type="button" value="定位" onclick='GetAddress()'>
</div>
<div id="map_canvas" style="width:400px; height:400px"></div>
</body>
</html>
这个一个静态的html页面处理，如果要嵌套进jsp页面中的话，直接将JS拷入就去就行了
jsp页面中在地址后面加一个按钮，直接用按钮的Onclick事件调用JS中的GetAddress()方法
这样就可以了·· 想要默认的话将上面
latlng = new google.maps.LatLng(lat, lon); //latlng = new google.maps.LatLng(39.86, 116.36);
这两行代码改成：
//latlng = new google.maps.LatLng(lat, lon); latlng = new google.maps.LatLng(0,0);
这样就可以了·· 不想要地图的话将底下地图的display属性设置为none就可以了,display:none