百度地图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); }); }); |