//1.首先引入百度api(ak需要自己去注册一个)
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=izIGFelUO4Ivt4odWZUlLyk1TivAv9IW"></script>
//2.在boby标签中添加<div id="allmap"></div>
//3.开始写入百度api的js代码
// 百度地图API功能
var map = new BMap.Map("allmap");
map.enableScrollWheelZoom(true);
var geocoder= new BMap.Geocoder();
var detailAddress; //详细地址
var point=new BMap.Point(121.472005,31.210733); // 创建点坐标
map.centerAndZoom(point, 12); // 初始化地图,设置中心点坐标和地图级别
map.enableContinuousZoom(); // 开启连续缩放效果
map.enableInertialDragging(); // 开启惯性拖拽效果
map.addControl(new BMap.NavigationControl()); // 添加控件
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
map.enableScrollWheelZoom();//启用滚轮放大缩小,默认禁用。
map.addControl(new BMap.NavigationControl());
var localSearch = new BMap.LocalSearch(map);
localSearch.enableAutoViewport(); //允许自动调节窗体大小
//自定义marker图标大小
var myIcon=new BMap.Icon("http://api0.map.bdimg.com/images/marker_red_sprite.png",new BMap.Size(30,25));//4.使用方法1
//通过经纬度获取详细地址
function getAjaxMap(lng,lat){
$.ajax({
type: 'POST',
dataType:'jsonp',
async:false,
url: 'http://api.map.baidu.com/geocoder/v2/?ak=izIGFelUO4Ivt4odWZUlLyk1TivAv9IW&callback=renderReverse&output=json&pois=1'+"&location="+lat+","+lng,
success: function(data){
$("#detailAddress").val(data.result.formatted_address);
}
});
}
//方法2
//通过详细地址获取经纬度
function getAjaxMapMore(city,address){
map.clearOverlays();//清空原来的标注
$.ajax({
type: 'POST',
dataType:'jsonp',
async:false,
url:'http://api.map.baidu.com/geocoder/v2/ak=izIGFelUO4Ivt4odWZUlLyk1TivAv9IW&output=json&city='+city+'&address='+address,
success: function(data){
document.getElementById("latitude").value = data.result.location.lat;
document.getElementById("longitude").value=data.result.location.lng ;
var marker = new BMap.Marker(new BMap.Point(data.result.location.lng, data.result.location.lat),{icon:myIcon}); // 创建标注,为要查询的地方对应的经纬度
map.addOverlay(marker);
var content = address+ "<br/><br/>经度:" + data.result.location.lng + "<br/>纬度:" + data.result.location.lat;
var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
setInterval(function(){
marker.addEventListener("mouseover", function () { this.openInfoWindow(infoWindow); });
},2000);
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
localSearch.search(address);
}
});
}
//方法3
//单击获取经纬度
map.addEventListener("click",function(e){
geocoder.getLocation(e.point,function(rs){
/* console.log(rs.address); //地址描述(string)
console.log(rs.addressComponents);//结构化的地址描述(object)
console.log(rs.addressComponents.province); //省
console.log(rs.addressComponents.city); //城市
console.log(rs.addressComponents.district); //区县
console.log(rs.addressComponents.street); //街道
console.log(rs.addressComponents.streetNumber); //门牌号
console.log(rs.surroundingPois); //附近的POI点(array)
console.log(rs.business); //商圈字段,代表此点所属的商圈(string) */
detailAddress=rs.addressComponents.city+rs.addressComponents.district+rs.addressComponents.street+rs.addressComponents.streetNumber;
$("#detailAddress").val(detailAddress);
map.clearOverlays();//清空原来的标注
var pt=e.point;
$("#longitude").val(e.point.lng);
$("#latitude").val(e.point.lat);
var marker = new BMap.Marker(e.point,{icon:myIcon}); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
var content = detailAddress + "<br/><br/>经度:" + e.point.lng + "<br/>纬度:" + e.point.lat;
var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
setInterval(function(){
marker.addEventListener("mouseover", function () { this.openInfoWindow(infoWindow); });
},2000);
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
});
});
//方法4
// 用经纬度设置地图中心点
function theLocation(){
if(document.getElementById("longitude").value != "" && document.getElementById("latitude").value != ""){
map.clearOverlays();
var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value);
var marker = new BMap.Marker(new_point,{icon:myIcon}); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.panTo(new_point);
var content = document.getElementById("detailAddress").value + "<br/><br/>经度:" + document.getElementById("longitude").value + "<br/>纬度:" + document.getElementById("latitude").value;
var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
setInterval(function(){
marker.addEventListener("mouseover", function () { this.openInfoWindow(infoWindow); });
},2000);
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
}
}
//通过经纬度获取详细地址
function getAjaxMap(lng,lat){
$.ajax({
type: 'POST',
dataType:'jsonp',
async:false,
//http://api.map.baidu.com/geocoder/v2/?ak=izIGFelUO4Ivt4odWZUlLyk1TivAv9IW&output=json&city=上海&address=上海市浦东新区
url: 'http://api.map.baidu.com/geocoder/v2/?ak=izIGFelUO4Ivt4odWZUlLyk1TivAv9IW&callback=renderReverse&output=json&pois=1'+"&location="+lat+","+lng,
success: function(data){
$("#detailAddress").val(data.result.formatted_address);
}
});
}
//通过详细地址获取经纬度
function getAjaxAddress(address){
$.ajax({ // 这样可以
url: "http://api.map.baidu.com/geocoder/v2/",
jsonp: "callback",
dataType: "jsonp",
data: {
address: address,
output:"json",
ak:"izIGFelUO4Ivt4odWZUlLyk1TivAv9IW"
},
success: function( data ) {
console.log( data.result.location );
//$("#location").val(response.result.location.lat +','+response.result.location.lng);
}
});
}