美文网首页工作生活
weex之百度地图组件开发

weex之百度地图组件开发

作者: 猪猪行天下 | 来源:发表于2019-07-02 13:01 被阅读0次

    一、前期准备

    使用百度账号,登陆百度地图开发平台申请AK。

    首先“创建应用”

    baidu1.png
    然后填写应用名称,选择应用类型和输入安全码,安全码为应用的Bundle Identifier,不对应的话则不会鉴权成功。
    baudu2.png

    在应用列表界面会获得访问应用的AK。

    使用 CocoaPods 安装 SDK。

    platform :ios, '7.0' #手机的系统
    target 'YourProjectTarget'
    do #工程名字
    pod “BaiduMapKit” #百度地图SDK
    pod 'BMKLocationKit' #百度定位SDK
    

    执行安装命令:

    pod install
    

    最后打开Xcode找到项目的info.plist文件,添加定位访问权限。

    我们只在打开应用时使用定位,所以选择Privacy - Location When In Use Usage Description。
    当然还有响应的具体描述,否则在上架时会被拒

    des3.png

    二、接口设计

    提供定位、地理编码、地理反编码、POI城市内检索、地图展示、添加自定义标注等基本功能,

    配合百度开发平台开发者文档做如下定义:
    1.定义一个定位模块WXLocationModule,提供定位、地理编码、地理反编码、POI城市内检索
    1)WX_EXPORT_METHOD(@selector(location:));
    说明:返回经纬度及位置信息
    返回结果:

     {
        result:failed,
        data:'错误信息说明'
     }
     {
         result:success,
         data:{
             latitude:'纬度',
             longitude:'经度',
             province:'省',
             city:'市',
             district:'区名字',
             street:'街道名字',
             streetNumber:'街道号码属性',
             cityCode:'城市编码',
             adCode:'行政区划编码属性',
             locationDescribe:'位置语义化结果的定位点在什么地方周围的描述信息,例如:东方明珠'
         }
     }
    

    (2)WX_EXPORT_METHOD(@selector(geoCode: result:));
    说明:根据位置信息返回经纬度;
    参数:{"city":"城市名称","address":"街道地址"}
    返回结果:

     {
     result:failed,
     data:'错误信息说明'
     }
     {
     result:success,
     data:{
         latitude:'纬度',
         longitude:'经度',
         level:'地理类型包含:UNKNOWN、国家、省、商圈、生活服务等等',
         precise:'是否是精准查找',//true:准确查找,false:不精确
         }
     }
    

    (3)WX_EXPORT_METHOD(@selector(reverseGeoCode: result:));
    说明:根据地理编码返回结果
    参数:{"latitude":"纬度","longitude":"经度"}
    返回结果:

    {
         result:failed,
         data:'错误信息说明'
     }
     {
         result:success,
         data:{
             province:'省',
             city:'市',
             district:'区名字',
             address:"地址名",
             businessCircle:"商圈名",
             latitude:'纬度',
             longitude:'经度',
             poiList:[{
                 name:"poi名称",
                 address:"poi地址信息",
                 province:'POI所在省份',
                 city:'POI所在城市',
                 area:"POI所在行政区域",
                 distance:"距离坐标点距离",
                 latitude:'纬度',
                 longitude:'经度'
             }]
         }
     }
    

    4)WX_EXPORT_METHOD(@selector(POISearch: result:));
    说明:城市POI搜索服务
    参数:{"city":"城市名称","keyword":"关键字"}
    返回结果:

     {
         result:failed,
         data:'错误信息说明'
     }
     {
     result:success,
         data:[{
             name:"poi名称",
             address:"poi地址信息",
             province:'POI所在省份',
             city:'POI所在城市',
             area:"POI所在行政区域",
             distance:"距离坐标点距离",
             latitude:'纬度',
             longitude:'经度'
         }]
     }
    

    2.定义一个地图组件WXMapComponent,提供展示、添加自定义标注、点聚合、运动轨迹
    (1)定义提供给weex使用的属性:
    zoomLevel:比例尺等级,默认14。取值范围:4-21;
    zoomControlsEnabled:是否展示地图缩放按钮,默认false。ios不支持;
    showTraffic:是否实时显示路况信息,默认false;
    userLocation:用户位置的经纬度,例:{latitude:'31.242727',longitude:'121.513295'}
    showScaleBar:是否显式比例尺,默认true
    scaleBarPosition:比例尺的位置,例如:{x:10,y:10}
    (2)定义提供给weex使用的事件方法:
    mapLoaded:地图加载完成事件;
    selectBubble:选中标注事件;
    autoAddAnnotation:点击地图空白处添加标注事件,不实现该方法,无法添加。
    (3)地图元素添加标注方法:
    WX_EXPORT_METHOD(@selector(addAnnotation:));
    weex使用:
    this.$refs.map.addAnnotation(annotationConfig)
    annotationConfig配置对象参数说明:
    pointType:0:默认标注 1:自定义标注图标
    paopaoType:0:默认泡泡,1:自定义泡泡
    canShowCallout:设置气泡是否可以弹出true或false
    select:设置标注是否弹出气泡true或false,只能选中一个
    pinColor:pointType为0时有效 pinColor取值:red,green,purple
    image:设置标注图片,在pointType为1时有效;设置泡泡图片paopaoType为1时有效
    title:若title为nil,则无法弹出泡泡
    subtitle:副标题

    三、组件开发

    1.新建TCMLocationManager.h类

    #import < Foundation/Foundation.h >
    //定位相关
    #import < BMKLocationkit/BMKLocationComponent.h >
    //地理编码
    #import < BaiduMapAPI_Base/BMKBaseComponent.h >
    #import < BaiduMapAPI_Search/BMKSearchComponent.h >
    
    //定位回调
    typedef void(^LocationCallBack)(NSError * _Nullable err,BMKLocation * _Nullable location);
    //BMKLocatingCompletionBlock单次定位回调
    
    @interface TCMLocationManager : NSObject
    
    + (nonnull instancetype)instance;
    
    +(NSString*)appKey;
    
    //是否持续定位,默认NO
    @property(nonatomic,assign)BOOL allwaysLocation;
    
    / **
     注册
    
     @param AK appKey
     * /
    -(void)registerWithKey:(NSString*)AK;
    -(void)registerWithKey:(NSString*)AK result:(void(^)(BMKLocationAuthErrorCode authCode))block;
    / **
     开启定位
    
     @param callBack 定位结果回调
     * /
    -(void)startWithLocation:(LocationCallBack)callBack;
    
    //正地理编码(即地址转坐标)
    -(void)geoCodeWithCity:(NSString*)city ByAddress:(NSString*)address result:(void(^)(NSError * _Nullable err,BMKGeoCodeSearchResult * _Nullable searchResult))block;
    
    //逆地理编码(即坐标转地址)
    -(void)reverseGeoCode:(CLLocationCoordinate2D)coordinate result:(void(^)(NSError * _Nullable err, BMKReverseGeoCodeSearchResult * _Nullable searchResult))block;
    
    //POI城市内检索
    -(void)poiSearchWithCity:(NSString*)city keyword:(NSString*)keyword result:(void(^)(NSError * _Nullable err, NSArray< BMKPoiInfo * > * _Nullable searchResult))block;
    
    //停止地图定位引擎
    -(void)stopManager;
    
    @end
    
    

    2.新建TCMLocationModule.h类,实现WXModuleProtocol。

    // 暴露给js的方法
    WX_EXPORT_METHOD(@selector(location:));
    WX_EXPORT_METHOD(@selector(geoCode: result:));
    WX_EXPORT_METHOD(@selector(reverseGeoCode: result:));
    WX_EXPORT_METHOD(@selector(POISearch: result:));
    

    3.新建WXMapComponent.h类继承WXComponent 。
    (1)WXMapComponent.h文件定义声明如下:

    #import "WXComponent.h"
    #import < WeexSDK/WeexSDK.h >
    #import < BaiduMapAPI_Base/BMKBaseComponent.h >
    #import < BaiduMapAPI_Map/BMKMapComponent.h >
    
    @interface WXMapComponent : WXComponent
    / *
     添加点标记
     参数:
     @{
         @"latitude":@"31.242727",//纬度
         @"longitude":@"121.513295",//经度
         @"title":@"上海",
         @"subtitle":@"陆家嘴金融中心"
     };
     * /
    -(void)addAnnotation:(NSDictionary*)dicAnnotation;
    
    @end
    

    (2)在WXMapComponent.m中定义相关属性和实现BMKMapViewDelegate.

    @interface WXMapComponent ()< BMKMapViewDelegate >
    //用来记录该事件是否生效
    @property (nonatomic,assign)BOOL mapLoaded;
    //点击标注上泡泡事件
    @property (nonatomic,assign)BOOL selectBubble;
    //是否显示用户位置
    @property (nonatomic,assign)BOOL showsUserLocation;
    //用户位置
    @property(nonatomic,strong)NSDictionary *userLocation;
    //是否实时显示路况信息
    @property(nonatomic,assign)BOOL showTraffic;
    //是否展示地图缩放按钮
    @property (nonatomic,assign)BOOL zoomControlsEnabled;
    //缩放等级:4-21
    @property(nonatomic,assign)CGFloat zoomLevel;
    //是否显式比例尺
    @property(nonatomic,assign)BOOL showScaleBar;
    // 比例尺的位置,设定坐标以BMKMapView左上角为原点,向右向下增长
    @property (nonatomic) CGPoint scaleBarPosition;
    //是否可自动添加标注
    @property(nonatomic,assign)BOOL autoAddAnnotation;
    @property (nonatomic,strong)id < BMKAnnotation > autoAnnotation;
    
    @property (nonatomic,strong)BMKMapView *mapView;
    @property (nonatomic,strong)TCMLocationManager *locationManager;
    //用于临时存储选中的标注
    @property (nonatomic,strong)id< BMKAnnotation > selectAnnotation;
    
    @end
    

    (3)实现属性绑定,重写initWithRef方法

    //自定义属性
    - (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance {
        if(self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]) {
           
            if (attributes[@"userLocation"]) {
                _userLocation = attributes[@"userLocation"];
                if (_userLocation[@"latitude"]&&_userLocation[@"longitude"]) {
                    _showsUserLocation = YES;
                }
            }
           
            if (attributes[@"showTraffic"]) {
                _showTraffic = [WXConvert BOOL: attributes[@"showTraffic"]];
            }else{
                _showTraffic = NO;
            }
            if (attributes[@"zoomLevel"]) {
                _zoomLevel = [WXConvert CGFloat: attributes[@"zoomLevel"]];
            }else{
                _zoomLevel = 14;
            }
           
            if (attributes[@"zoomControlsEnabled"]) {
                _zoomControlsEnabled = [WXConvert BOOL: attributes[@"zoomControlsEnabled"]];
            }else{
                _zoomControlsEnabled = NO;
            }
            if (attributes[@"showScaleBar"]) {
                _showScaleBar = [WXConvert BOOL: attributes[@"showScaleBar"]];
            }else{
                _showScaleBar = YES;
            }
           
            if (attributes[@"scaleBarPosition"]) {
                NSDictionary *barPoint = attributes[@"scaleBarPosition"];
                CGFloat x = barPoint[@"x"]?[WXConvert WXPixelType: barPoint[@"x"] scaleFactor:self.weexInstance.pixelScaleFactor]:1;
                CGFloat y =  barPoint[@"y"]?[WXConvert WXPixelType: barPoint[@"y"] scaleFactor:self.weexInstance.pixelScaleFactor]-20:1;
                CGPoint position = CGPointMake(x,y);
                _scaleBarPosition = position;
            }
           
        }
        return self;
    }
    

    (4)重写WXMapComponent.m的loadView方法加载地图视图并设置默认中心位置

    - (UIView *)loadView {
        _mapView = [BMKMapView new];
        [_mapView setCenterCoordinate:CLLocationCoordinate2DMake(31.242727, 121.513295) animated:NO];
        return _mapView;
    }
    

    (5)添加事件

    #pragma mark -- 事件
    - (void)addEvent:(NSString *)eventName {
        if ([eventName isEqualToString:@"mapLoaded"]) {
            _mapLoaded = YES;
        }
        if ([eventName isEqualToString:@"selectBubble"]) {
            _selectBubble = YES;
        }
        if ([eventName isEqualToString:@"autoAddAnnotation"]) {
            _autoAddAnnotation = YES;
        }
       
    }
    

    其他具体细节实现详见demo.

    四、组件在weex中的使用方法

    1)WXLocationModule在weex中的使用

    const location = weex.requireModule("location");
    //获取用户位置
    location.location(function(result){
      if(result.result == 'success')
             console.log('location返回:',result.data);
       }else{
    
       }
    })
    
    //正向地理编码
    var geoCodeParam = {'city':'上海市'}
    location.geoCode(geoCodeParam,function(result){
      console.log('根据城市返回:',result);
      if(result.result == 'success'){
    
       }else{
    
       }
    
    })
    
    //逆向地理编码
    var coordinate = {longitude:'',latitude:''}
    location.reverseGeoCode(coordinate,function(result){
    
          console.log('逆向地理编码结果:',result);
    
    }
    
    //poi城市内检索
    location.POISearch({city:self.cityName,keyword:this.inputStr},function(event){
    
         modal.alert({message:'搜索结果:'+JSON.stringify(event)},call=>{})
    
    })
    
    

    2)WXMapComponent在weex中的使用

    <map class="map-div"
              ref='map'
              @mapLoaded="mapLoaded"
              @selectBubble="selectBubble"
              zoomLevel='18'
              showTraffic='false'
              :userLocation="userLocation"
              showScaleBar="true"
             :scaleBarPosition="{x:10,y:40}"
    ></map >
    
    //methods事件:
    
    mapLoaded(){
       console.log('地图记载完成')
    
       //添加标注
       let annotationConfig3={
                          latitude:"31.242727",//纬度
                           longitude:"121.383295",//经度
                           title:"上海",
                            subtitle:"自定义标注,自定义泡泡",
                            pointType:'1',
                             paopaoType:'1',
                             pinColor:'red',
                              canShowCallout:'false',
                               image:'http://tcmdefaultbucket-1253294191.cossh.myqcloud.com/img/upload/avatar/654b64f2-e820-490a-81f1-a29a2b75da8e.jpg_small.jpg'
    }
    
         this.$refs.map.addAnnotation(annotationConfig3)
    
     },
    
    selectBubble(event){
        //点击标注泡泡的方法
        modal.alert({message:'泡泡:'+JSON.stringify(event.rawData)},ev=>{})
    },
    
    

    相关文章

      网友评论

        本文标题:weex之百度地图组件开发

        本文链接:https://www.haomeiwen.com/subject/exjzcctx.html