示例中心
功能在线体验
控制台

H5调用Native定位

该示例向您展示H5页面如何调用Native定位(Android/iOS 定位 SDK)获取精确位置。
00:00 / 01:00
扫描二维码在手机端体验功能
体验移动端 扫码体验移动端

使用场景

该示例主要展示App的H5页面如何调用Native定位获取位置。

用到产品

Android 定位 SDK

核心类/接口

接口

说明

版本

AMapLocationClient

startAssistantLocation()

启动辅助H5定位

自V2.0.0版本起


stopAssistantLocation()

停止辅助H5定位

自V2.0.0版本起

核心难点

1、通过 AMapLocationClient 类的startAssistantLocation()方法开启辅助H5定位功能;


if(null == locationClientSingle){
        locationClientSingle = new AMapLocationClient(this.getApplicationContext());
    }
locationClientSingle.startAssistantLocation();

2、初始化Web页面。

public void initWebSettings(WebView mWebView) {
        if (null == mWebView) {
            return;
        }
        WebSettings webSettings = mWebView.getSettings();
        //允许webview执行javaScript脚本
        webSettings.setJavaScriptEnabled(true);
        //设置是否允许定位,这里为了使用H5辅助定位,设置为false。
        //设置为true不一定会进行H5辅助定位,设置为true时只有H5定位失败后才会进行辅助定位
        webSettings.setGeolocationEnabled(false);
        //设置UserAgent
        String userAgent = webSettings.getUserAgentString();
        mWebView.getSettings().setUserAgentString(userAgent);

        mWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
        mWebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
        mWebView.getSettings().setDomStorageEnabled(true);
        mWebView.getSettings().setAppCacheEnabled(true);
        mWebView.getSettings().setAllowContentAccess(true);
        mWebView.getSettings().setDatabaseEnabled(true);
        mWebView.getSettings().setPluginState(WebSettings.PluginState.ON);
        mWebView.setHorizontalScrollBarEnabled(false);
        mWebView.setHorizontalScrollbarOverlay(true);

    }

3、当定位结束时停止辅助H5页面定位。

if (null != locationClientSingle) {
    locationClientSingle.stopAssistantLocation();
    locationClientSingle.onDestroy();
}

 

00:00 / 01:00
扫描二维码在手机端体验功能
体验移动端 扫码体验移动端

使用场景

该示例主要展示App的H5页面如何调用Native定位获取位置。

用到产品

iOS 定位 SDK

核心类/接口

接口

说明

版本

AMapLocationManager

requestLocationWithReGeocode:completionBlock:

执行单次定位接口

V1.0.0版本起

核心难点

1、实现WebView,目的是让OC与JS可以互相调用;


//配置 WebView,让OC和JS可以互调。
- (void)configTheJSContext {
    self.context = [self.webView valueForKeyPath:(NSString *)WebViewKeyPath];
    JavaScriptObj *javaScript = [[JavaScriptObj alloc] init];  //自定义一个类来管理需要被JS调用的函数
    self.context[(NSString *)JavaScriptCallOCObj] = javaScript;
}
//配置 WebView,让OC和JS可以互调。
- (void)configTheJSContext {
    self.context = [self.webView valueForKeyPath:(NSString *)WebViewKeyPath];
    JavaScriptObj *javaScript = [[JavaScriptObj alloc] init];  //自定义一个类来管理需要被JS调用的函数
    self.context[(NSString *)JavaScriptCallNativeObj] = javaScript;
}

2、实现OC调用JS的方法,后续会用到。

//OC调用JS,传入JS的函数名,所需参数依次组成的数组
- (JSValue *)letOCCallJSWithFunName:(NSString *)funName andArguments:(NSArray *)argumentsArray inJSContext:(JSContext *)jsContext {
    JSValue *function = [jsContext objectForKeyedSubscript:funName];
    JSValue *result = [function callWithArguments:argumentsArray];
    return result;
}
//OC调用JS,传入JS的函数名,所需参数依次组成的数组
- (JSValue *)letOCCallJSWithFunName:(NSString *)funName andArguments:(NSArray *)argumentsArray inJSContext:(JSContext *)jsContext {
    JSValue *function = [jsContext objectForKeyedSubscript:funName];
    JSValue *result = [function callWithArguments:argumentsArray];
    return result;
}

3、单次定位,并在JS地图上显示定位点,。

//进行单次定位请求
- (void)startLocationAction {

    [self cleanUpAction];

    self.loadingView.hidden = NO;

    __weak typeof(self) weakSelf = self;
    [self.locationManager requestLocationWithReGeocode:NO completionBlock:^(CLLocation *location, AMapLocationReGeocode *regeocode, NSError *error) {

        weakSelf.loadingView.hidden = YES;

        if (error) {

            NSLog(@"locError:{%ld - %@};", (long)error.code, error.localizedDescription);
            //如果为定位失败的error,则不进行后续操作
            if (error.code == AMapLocationErrorLocateFailed) {
                return;
            }
        }

        //得到定位信息后,调用JS函数addMarker,需要两个参数,经度和纬度,组成数组传入,其他函数详见map.html
        if (location) {
            [weakSelf letOCCallJSWithFunName:@"addMarker" andArguments:@[[NSNumber numberWithDouble:location.coordinate.longitude],[NSNumber numberWithDouble:location.coordinate.latitude]] inJSContext:self.context];
        }
    }];
}
//进行单次定位请求
- (void)startLocationAction {

    [self cleanUpAction];

    self.loadingView.hidden = NO;

    __weak typeof(self) weakSelf = self;
    [self.locationManager requestLocationWithReGeocode:NO completionBlock:^(CLLocation *location, AMapLocationReGeocode *regeocode, NSError *error) {

        weakSelf.loadingView.hidden = YES;

        if (error) {

            NSLog(@"locError:{%ld - %@};", (long)error.code, error.localizedDescription);
            //如果为定位失败的error,则不进行后续操作
            if (error.code == AMapLocationErrorLocateFailed) {
                return;
            }
        }

        //得到定位信息后,调用JS函数addMarker,需要两个参数,经度和纬度,组成数组传入,其他函数详见map.html
        if (location) {
            [weakSelf letOCCallJSWithFunName:@"addMarker" andArguments:@[[NSNumber numberWithDouble:location.coordinate.longitude],[NSNumber numberWithDouble:location.coordinate.latitude]] inJSContext:self.context];
        }
    }];
}