关于根据地址获取经度和纬度

最新推荐文章于 2021-08-13 11:30:03 发布

never_A_VIP

最新推荐文章于 2021-08-13 11:30:03 发布

阅读量179

点赞数

文章标签： Google JavaScript CSS JSP HTML ViewUI

本文链接：https://blog.csdn.net/never_A_VIP/article/details/83807808

版权

关于根据地址获取经度和纬度谈谈自己刚做的一个小模块

<!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 οnlοad="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="定位" οnclick='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

never_A_VIP

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于根据地址获取经度和纬度

关于根据地址获取经度和纬度谈谈自己刚做的一个小模块&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"/&gt;&lt;meta http-equiv="content-type"
复制链接

扫一扫