<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/commons/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>百度地图定位</title>
<style type="text/css">
</style>
<script src="${root}/resources/js/jquery.min.js" type="text/javascript"></script>
<script src="${root}/resources/js/sockjs-0.3.min.js" type="text/javascript"></script>
<script src="${root}/resources/js/json.js" type="text/javascript"></script>
</head>
<body>
<h3 class="title" id="location-s">获取位置中.....</h3>
<input type="text" id="province-l" />
<input type="text" id="city-l" />
<input type="text" id="district-l" />
<input type="text" id="street-n-l" />
<section id="allmap">
<div style="position:absolute;width:48px;height:48px;top:50%;left:50%;margin:-24px 0 0 -24px;">
<img data-name="location-loading1" src="${root }/resources/images/loading-1.png" style="width:48px;height:48px;">
</div>
</section>
</body>
<script src="https://api.map.baidu.com/api?ak=KcowYqyt2PUBGDWRL92Qovfj&v=2.0"></script>
<script>
$(function(){
doLocationByIp();
})
/**
* IP定位API
*/
function doLocationByIp(){
$.ajax({
type: 'GET',
url : "https://api.map.baidu.com/location/ip?ak=nni9lnfMwWNpheHIucBkMpHB&ip=&coor=bd09ll",
async: false,
dataType: "jsonp",
beforeSend:function(){
//showLoading();
},
success: function(o){
if(o.status==0){
showMap(o.content.point.x,o.content.point.y);
}
}
});
}
function showMap(lng,lat){
var point = new BMap.Point(lng,lat); //获得gps坐标,使用百度地图需要转换一下
var map = new BMap.Map("allmap");
map.centerAndZoom(point, 18);
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker);
var gc = new BMap.Geocoder();
map.addEventListener("click", function(e){
setLocation(gc,e.point);
var mkr = new BMap.Marker(e.point, {icon: myIcon});
map.addOverlay(mkr);
});
setLocation(gc,point);
}
function setLocation(gc,point){
gc.getLocation(point, function(rs){
var addComp = rs.addressComponents;
$('#province-l').val(addComp.province);
$('#city-l').val(addComp.city);
$('#district-l').val(addComp.district);
$('#street-n-l').val(addComp.street + " " + addComp.streetNumber);
$('#location-s').text(rs.address );
});
}
</script>
</html>
百度地图Ip定位
最新推荐文章于 2024-06-15 13:51:57 发布