百度地图API常用调用

百度地图API常用调用

 

（1）      创建地图前期准备

Html页面创建一个层

<divid="positionMap"></div>

 

添加js引用

<scripttype="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=***"></script>

<scripttype="text/javascript"src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>

 

js函数调用

// 百度地图API功能

var map = new BMap.Map("positionMap");

map.centerAndZoom(new BMap.Point(latitude, longitude), $scope.viewZoom);

map.enableScrollWheelZoom();

 

（2）      添加地图控件

//添加左上角比例尺

map.addControl(new BMap.NavigationControl({anchor: BMAP_NAVIGATION_CONTROL_LARGE}));

     

//添加右下角缩略图

var overViewOpen=new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});

map.addControl(overViewOpen);     //右下角，打开

 

（3）      创建覆盖物

if(points!=undefined&& points!=null){

         //有值的时候直接搞定

      }else{

         //根据中心点计算4个矩形坐标，量出5公里即可

         var latitudeNum=0.045045;//1纬度是111公里

         var longitudeNum=0.035045;//写个大概的值

        

         var leftTopPoint=new BMap.Point(latitude+latitudeNum, longitude-longitudeNum);

         var leftBottomPoint= new BMap.Point(latitude-latitudeNum, longitude-longitudeNum);

        

         var rightTopPoint=new BMap.Point(latitude+latitudeNum, longitude+longitudeNum);

         var rightBottomPoint=new BMap.Point(latitude-latitudeNum, longitude+longitudeNum);

         var newPoints=[leftBottomPoint, leftTopPoint, rightTopPoint, rightBottomPoint];

         points = newPoints;

      }

     

      var polygon=new BMap.Polygon(points,{

         strokeColor: "red",

         strokeWeight: 4,

         strokeOpacity: 0.5,

         fillColor : "none",

      }); //创建多边形

     

map.addOverlay(polygon);//增加多边形

 

（4）      判断点是否在覆盖物范围内

var point = new BMap.Point($scope.fence.longitude, $scope.fence.latitude);

var t = BMapLib.GeoUtils.isPointInPolygon(point, $scope.polygon);

if(t===true){

   upserve.tip("该点在覆盖范围内");

}else{

   upserve.tip("该点在覆盖范围外");

}

 

（5）      删除地图覆盖物

map.clearOverlays();  //这个是删除全部

map.removeOverlay(polygon);

 

（6）      添加点击事件 

//点击获取坐标

map.addEventListener("click",function(e){

   //存储经纬度

   lng = e.point.lng;

   lat = e.point.lat;

    map.centerAndZoom(e.point, 12);

   //在地图上面描点

   var marker=new BMap.Marker(new BMap.Point(lng,lat)); //创建标注

   map.addOverlay(marker);

   marker.enableDragging();   //可拖拽

 

   var gc = new BMap.Geocoder();

   //获取地址的数据地址

   var pt = e.point;

   gc.getLocation(pt,function(rs){

      var addComp= rs.addressComponents;

      address = addComp.province+  addComp.city+ addComp.district+ addComp.street+ addComp.streetNumber;

      //画图

      var label=new BMap.Label(address,{offset:new BMap.Size(20,-10)});

      marker.setLabel(label);

      map.addOverlay(marker);

   });

});