百度地图api的使用心得

//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);
}
});
}

百度地图api的使用心得

猜你喜欢