第1行: | 第1行: | ||
− | <div id="examples_center"> | + | <div id="examples_center"><!-- 页面标题 --><div class="title-hd">辅助H5定位</div><!-- 标题下子标题及简介,可有多个 --><div class="title-mi">功能场景</div><div class="wrap-mi">本示例展示了在H5页面中如何调用Native定位接口获取位置,并使用百度定位SDK提升定位精度。</div><!-- --></div><div class="demos_wrap"><div class="header"><div class="andiord-header active">Android</div><div class="ios-header hide">iOS</div></div><div class="andiord-wrap wrap"><div class="wrap-wp"><div class="wrap_left"><div class="left-video"><div class="img-bg-and"></div><div class="phone-android"><div class="video-wrap infor"><div class="video-control"></div><!-- 安卓视频位置 (不写协议)--><pre>//mapopen-website-wiki.bj.bcebos.com/demos/AndroidVideos/辅助H5定位.mp4</pre> |
− | + | </div><div class="video-icon-and"><div class="play play-and"></div><div class="stop stop-and"></div></div></div><div class="progressWrap-hide-and"></div><div id="videoControls-and"><div id="progressWrap-and"><div id="playProgress-and"></div></div></div></div><div class="left-qrCode"><!-- 安卓二维码位置 --><div class="qrCode-and">1590746640|//mapopen-website-wiki.bj.bcebos.com/demos/newqrcodes/辅助H5定位.png</div><div>扫码体验</div></div></div><div class="wrap_right"><div class="wrap_right_nav"><div class="wrap_right_nav_l"><div>使用产品</div><div><!-- 安卓使用产品下选项,可有多个 --><div class="documentA">Android定位SDK|/index.php?title=android-locsdk</div><div>></div><div class="documentA">辅助H5定位|/index.php?title=android-locsdk/guide/addition-func/assistant-h5</div></div></div><div class="wrap_right_nav_r">下载源码</div><!-- 安卓源码地址 --><div class="github-url-and">//mapopen-website-wiki.bj.bcebos.com/demos/location/AssistLocationDemo.zip</div></div><div class="wrap_table"><div class="table_nav"><div class="left-icon"></div><div>核心接口</div></div><div class="table_wrap"><div class="table_wrap_title"><div>类</div><div>接口</div><div>描述</div></div><!-- 表格接口,可有多个 --><div class="table_wrap_con"><div class="table_wrap_w"><div><div class="table-wrap-className">LocationClient</div></div><div><div>enableAssistantLocation(android.webkit.WebView webView)</div></div><div><div>开发者应用如果有H5页面使用了百度JS定位接口,该接口可以辅助百度JS定位更好的进行定位</div></div></div><!-- --><div class="table_wrap_w"><div><div class="table-wrap-className">LocationClient</div></div><div><div>disableAssistantLocation()</div></div><div><div>停止H5辅助定位</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">LocationClient</div></div><div><div>start()</div></div><div><div>开启定位</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">LocationClient</div></div><div><div>开启定位</div></div><div><div>关闭定位</div></div></div></div></div></div></div></div><div class="pre-nav"><div class="left-icon"></div><div>核心代码</div></div><div class="pre-nav"><div>1.设置WebView属性加载H5页面</div></div><div class="pre-wrap"><div class="pre-wrap-nav"><div>JAVA</div></div><!-- 安卓示例代码位置 --><div class="pre-wrap-w pre-wrap-w-and"><pre class="prettyprint prettyprinted pre-and">/** | |
− | + | ||
− | + | ||
− | + | ||
− | </div> | + | |
− | <div class="demos_wrap"> | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | /** | + | |
* 设置setWebView | * 设置setWebView | ||
*/ | */ | ||
第186行: | 第57行: | ||
} | } | ||
</pre> | </pre> | ||
− | + | <div class="pre-btn"><div class="pre-btn-copy-and">复制</div><div class="pre-btn-cb-and">深色</div></div><div class="success">复制成功</div></div></div><div class="pre-nav"><div>2.开启辅助定位</div></div><div class="pre-wrap"><div class="pre-wrap-nav"><div>JAVA</div></div><!-- 安卓示例代码位置 --><div class="pre-wrap-w pre-wrap-w-and"><pre class="prettyprint prettyprinted pre-and">// 启动H5辅助定位 | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | // 启动H5辅助定位 | + | |
mLocationClient.enableAssistantLocation(contentWebView); | mLocationClient.enableAssistantLocation(contentWebView); | ||
mLocationClient.start(); | mLocationClient.start(); | ||
</pre> | </pre> | ||
− | + | <div class="pre-btn"><div class="pre-btn-copy-and">复制</div><div class="pre-btn-cb-and">深色</div></div><div class="success">复制成功</div></div></div></div><div class="ios-wrap wrap" style="display: none;"><div class="wrap-wp"><div class="wrap_left"><div class="left-video"><div class="img-bg-ios"></div><div class="phone-ios"><div class="video-wrap infor"><div class="video-control"></div><!-- ios视频位置 --><pre>//mapopen-website-wiki.bj.bcebos.com/demos/iostest.MP4</pre> | |
− | + | </div><div class="video-icon-ios"><div class="play play-ios"></div><div class="stop stop-ios"></div></div></div><div class="progressWrap-hide-ios"></div><div id="videoControls-ios"><div id="progressWrap-ios"><div id="playProgress-ios"></div></div></div></div><div class="left-qrCode"><!-- ios二维码位置 --><div class="qrCode-ios">//mapopen-website-wiki.bj.bcebos.com/demos/play.png</div><div>扫码手机观看</div></div></div><div class="wrap_right"><div class="wrap_right_nav"><div class="wrap_right_nav_l"><div>使用产品</div><div><!-- IOS使用产品下选项,可有多个 --><div class="documentA">产品1|/index.php?title=test</div><!-- --><div>></div><div class="documentA">产品2|/index.php?title=test</div></div></div><div class="wrap_right_nav_r">下载源码</div><!-- IOS源码地址 --><div class="github-url-ios">//mapopen-website-wiki.bj.bcebos.com/demos/xs%20max.png</div></div><div class="wrap_table"><div class="table_nav"><div class="left-icon"></div><div>核心接口</div></div><div class="table_wrap"><div class="table_wrap_title"><div>类</div><div>接口</div><div>描述</div><div>备注</div></div><!-- ios表格接口内容,可有多个 --><!-- 表格接口,可有多个 --><div class="table_wrap_con"><div class="table_wrap_w"><div><div class="table-wrap-className">BMKClusterManager</div></div><div><div>- (void)clearClusterItems;</div></div><div><div>清除标注集群items</div></div><div><div>V4.0.0起</div></div></div><!-- --><div class="table_wrap_w"><div><div class="table-wrap-className">BMKClusterManager</div></div><div><div>- (NSArray<BMKCluster *> *)getClusters:(CGFloat)zoomLevel;</div></div><div><div>根据地图缩放级别获取标注集群</div></div><div><div>V4.0.0起</div></div></div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | </div></div></div></div></div><div class="pre-nav"><div class="left-icon"></div><div>核心代码</div></div><div class="pre-wrap"><div class="pre-wrap-title">1.第一步</div><div class="pre-wrap-nav"><div>Objective-C</div></div><div class="pre-wrap-w pre-wrap-w-ios code_container"><!-- ios示例代码位置 --><pre class="prettyprint prettyprinted pre-ios">1 | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | 1 | + | |
/** 更新标注展示. */ | /** 更新标注展示. */ | ||
- (void)updateClusters { | - (void)updateClusters { | ||
第363行: | 第102行: | ||
</pre> | </pre> | ||
− | + | <div class="pre-btn"><div class="pre-btn-copy-ios">复制</div><div class="pre-btn-cb-ios">深色</div></div><div class="success">复制成功</div></div></div><div class="pre-wrap"><div class="pre-wrap-title">2.第二步</div><div class="pre-wrap-nav"><div>Objective-C</div></div><div class="pre-wrap-w pre-wrap-w-ios code_container"><!-- ios示例代码位置 --><pre class="prettyprint prettyprinted pre-ios">2 | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | 2 | + | |
/** 更新标注展示. */ | /** 更新标注展示. */ | ||
- (void)updateClusters { | - (void)updateClusters { | ||
第417行: | 第140行: | ||
</pre> | </pre> | ||
− | + | <div class="pre-btn"><div class="pre-btn-copy-ios">复制</div><div class="pre-btn-cb-ios">深色</div></div><div class="success">复制成功</div></div></div><div class="pre-wrap"><div class="pre-wrap-title">3.名字</div><div class="pre-wrap-nav"><div>Objective-C</div></div><div class="pre-wrap-w pre-wrap-w-ios code_container"><!-- ios示例代码位置 --><pre class="prettyprint prettyprinted pre-ios">3 | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | 3 | + | |
/** 更新标注展示. */ | /** 更新标注展示. */ | ||
- (void)updateClusters { | - (void)updateClusters { | ||
第471行: | 第178行: | ||
</pre> | </pre> | ||
− | + | <div class="pre-btn"><div class="pre-btn-copy-ios">复制</div><div class="pre-btn-cb-ios">深色</div></div><div class="success">复制成功</div></div></div><div class="more-nav"><div class="left-icon"></div><div>更多功能</div></div><div class="more-wrap"><!-- IOS更多功能下选项 --><!-- 点标记动画|/index.php?title=test --><div><div class="point"></div><div class="documentA">点标记动画|/index.php?title=test</div></div><div><div class="point"></div><div class="documentA">点融合|/index.php?title=test</div></div><div><div class="point"></div><div class="documentA">添加文字和信息窗|/index.php?title=test</div></div></div></div></div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </div> | + |
2022年2月25日 (五) 17:33的最后版本
辅助H5定位
功能场景
本示例展示了在H5页面中如何调用Native定位接口获取位置,并使用百度定位SDK提升定位精度。
Android
//mapopen-website-wiki.bj.bcebos.com/demos/AndroidVideos/辅助H5定位.mp4
1590746640|//mapopen-website-wiki.bj.bcebos.com/demos/newqrcodes/辅助H5定位.png
扫码体验
使用产品
Android定位SDK|/index.php?title=android-locsdk
>
辅助H5定位|/index.php?title=android-locsdk/guide/addition-func/assistant-h5
下载源码
//mapopen-website-wiki.bj.bcebos.com/demos/location/AssistLocationDemo.zip
核心接口
类
接口
描述
LocationClient
enableAssistantLocation(android.webkit.WebView webView)
开发者应用如果有H5页面使用了百度JS定位接口,该接口可以辅助百度JS定位更好的进行定位
LocationClient
disableAssistantLocation()
停止H5辅助定位
LocationClient
start()
开启定位
LocationClient
开启定位
关闭定位
核心代码
1.设置WebView属性加载H5页面
JAVA
/** * 设置setWebView */ private void setWebView(){ contentWebView = (WebView) findViewById(R.id.webview); contentWebView.loadUrl("file:///android_asset/AssistantLoc.html"); WebSettings webSettings = contentWebView.getSettings(); // 允许webview执行javaScript脚本 webSettings.setJavaScriptEnabled(true); // 设置是否允许定位,这里为了使用H5辅助定位,设置为false。 // 设置为true不一定会进行H5辅助定位,设置为true时只有H5定位失败后才会进行辅助定位 // webSettings.setGeolocationEnabled(false); contentWebView.setWebViewClient(new WebViewClient() { // 页面请求完成 public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); } // 页面开始加载 public void onPageStarted(WebView view, String url, Bitmap favicon) { super.onPageStarted(view, url, favicon); } }); contentWebView.setWebChromeClient(new WebChromeClient() { // 处理javascript中的alert public boolean onJsAlert(WebView view, String url, String message, final JsResult result) { return true; }; // 处理javascript中的confirm public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) { return true; }; // 处理定位权限请求 @Override public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) { callback.invoke(origin, true, false); super.onGeolocationPermissionsShowPrompt(origin, callback); } @Override // 设置网页加载的进度条 public void onProgressChanged(WebView view, int newProgress) { MainActivity.this.getWindow().setFeatureInt( Window.FEATURE_PROGRESS, newProgress * 100); super.onProgressChanged(view, newProgress); } // 设置应用程序的标题title public void onReceivedTitle(WebView view, String title) { super.onReceivedTitle(view, title); } }); }
复制
深色
复制成功
2.开启辅助定位
JAVA
// 启动H5辅助定位 mLocationClient.enableAssistantLocation(contentWebView); mLocationClient.start();
复制
深色
复制成功