Android网页中加载Native地图资源-CSDN文库

共63个文件

class：22个

jar：10个

png：9个

Android

WebView

Html

4星 · 超过85%的资源需积分: 10 148 浏览量 2013-05-31 16:59:47 上传评论收藏 4.67MB ZIP 举报

在Android开发中，有时我们需要在Web视图（WebView）中集成原生的地图功能，以便在网页中展示和操作地图。本教程将详细讲解如何在HTML中加载并控制MapABC的原生地图，实现一个Android应用的混合式开发，充分利用WebView与原生API的优势。了解基本概念。Android WebView是一个系统组件，它允许我们在Android应用中加载和显示HTML内容。而MapABC则是一个地图服务提供商，提供地图API供开发者集成到自己的应用中。我们将通过WebView加载自定义的HTML页面，然后在页面中调用Android原生的接口来与MapABC地图进行交互。步骤一：设置Android项目确保你的Android项目已经添加了WebView库。在`build.gradle`文件的dependencies块中，添加以下依赖： ```groovy implementation 'androidx.webkit:webkit:1.3.0' ``` 同时，需要在AndroidManifest.xml中请求网络和定位权限： ```xml <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> ``` 步骤二：创建HTML和JavaScript 创建一个HTML文件，例如`map.html`，在这个文件中，我们可以使用JavaScript来控制地图的显示和操作。MapABC通常会提供一个JavaScript库，如`mapabc.js`，用于在网页中使用其地图API。在HTML中引入这个库，并创建一个div元素作为地图容器： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>MapABC Webview示例</title> <script src="mapabc.js"></script> <style> #map { width: 100%; height: 500px; } </style> </head> <body> <div id="map"></div> <button onclick="showLocation()">显示位置</button> <script> // 初始化地图 var map = new MapABC.Map('map', { key: 'your_mapabc_key' }); function showLocation() { // 调用原生方法获取位置 window.native.showLocation(); } </script> </body> </html> ``` 这里，`your_mapabc_key`需要替换为你的MapABC API密钥。步骤三：实现Android原生接口在Android端，我们需要创建一个`WebChromeClient`或`WebViewClient`子类，实现JavaScript与原生代码的交互。例如，创建一个名为`MapWebChromeClient`的类： ```java public class MapWebChromeClient extends WebChromeClient { @Override public boolean onJsAlert(WebView view, String url, String message, JsResult result) { // 处理来自JavaScript的警报对话框 return super.onJsAlert(view, url, message, result); } @JavascriptInterface @Override public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) { // 允许网页访问地理位置 callback.invoke(origin, true, false); } public void showLocation() { // 在此处调用原生的定位服务，并将结果返回给JavaScript } } ``` 在`showLocation`方法中，你需要使用Android的定位服务获取用户的位置，然后通过`WebView`的`addJavascriptInterface`方法将位置数据暴露给JavaScript。步骤四：在Activity中设置WebView 在主Activity中，加载HTML文件并设置`MapWebChromeClient`： ```java WebView webView = findViewById(R.id.web_view); webView.setWebChromeClient(new MapWebChromeClient()); webView.loadUrl("file:///android_asset/map.html"); webView.addJavascriptInterface(new JavaScriptInterface(), "native"); ``` 其中，`JavaScriptInterface`是一个实现了`@JavascriptInterface`注解的类，用于接收和响应JavaScript的调用。总结，实现"Android网页中加载Native地图"主要涉及以下步骤： 1. 配置Android项目，添加WebView依赖并请求必要的权限。 2. 创建HTML和JavaScript，引入MapABC的JavaScript库，并通过JavaScript控制地图显示和操作。 3. 实现Android原生接口，处理JavaScript与原生代码的交互，包括地图初始化、位置获取等。 4. 在Activity中设置WebView，加载HTML并暴露原生方法给JavaScript调用。以上就是实现Android网页中加载并控制MapABC原生地图的基本流程。在实际开发中，你可能需要根据具体需求对这些步骤进行调整和完善，例如添加错误处理、优化地图性能等。

资源推荐

资源详情

资源评论

收起资源包目录

MapDemo.zip （63个子文件）

MapDemo

.project 810B

bin

AndroidManifest.xml 2KB

dexedLibs

geocoder_location-338cf49897078061ec8e4613c812e5e5.jar 43KB

poisearch_route-554a9510def783e4103148602b4b89d7.jar 146KB

android-support-v4-ca2a3e09af2abb54dd9b696c34bead3f.jar 146KB

core-c8fa19526402e35e3f4c0e00526445f8.jar 268KB

map-a3c1a9264057acebe291f8939393982c.jar 454KB

MapDemo.apk 1.26MB

res

drawable-ldpi

ic_launcher.png 2KB

drawable-hdpi

ic_launcher.png 6KB

drawable-mdpi

ic_launcher.png 3KB

drawable-xhdpi

ic_launcher.png 10KB

resources.ap_ 27KB

classes

com

tidroid

mapdemo

R$string.class 473B

R$layout.class 406B

MainActivity$MapJS.class 1KB

MainActivity.class 4KB

R$drawable.class 410B

R$menu.class 400B

R.class 634B

R$style.class 434B

BuildConfig.class 347B

MainActivity$2.class 878B

R$attr.class 343B

MainActivity$1.class 895B

R$id.class 425B

example

mapdemo

R$string.class 473B

R$layout.class 406B

R$drawable.class 410B

R$menu.class 400B

R.class 634B

R$style.class 434B

BuildConfig.class 347B

R$attr.class 343B

R$id.class 425B

classes.dex 2.23MB

ic_launcher-web.png 54KB

AndroidManifest.xml 2KB

proguard-project.txt 781B

libs

geocoder_location.jar 85KB

poisearch_route.jar 332KB

armeabi

libminimapv320.so 529KB

map.jar 559KB

android-support-v4.jar 377KB

core.jar 644KB

src

com

tidroid

mapdemo

MainActivity.java 3KB

project.properties 563B

res

values

styles.xml 679B

strings.xml 223B

layout

activity_main.xml 401B

drawable-ldpi

ic_launcher.png 2KB

drawable-hdpi

ic_launcher.png 8KB

values-v11

styles.xml 323B

drawable-mdpi

ic_launcher.png 4KB

drawable-xhdpi

ic_launcher.png 13KB

activity_main.xml 249B

values-v14

styles.xml 380B

.classpath 356B

gen

com

tidroid

mapdemo

R.java 2KB

BuildConfig.java 161B

example

mapdemo

R.java 2KB

BuildConfig.java 161B

assets

testmap.html 2KB

评论收藏

内容反馈

不会消失的夜晚187

2013-09-04

可以实现，挺有创意

玉盏清茶

粉丝: 5
资源: 3

Android网页中加载Native地图

Android Native库的加载及动态链接的过程

quaketrack:基于React Native的Android和iOS地震地图和警报应用程序

react-native-image-offline:用于iOS和Android离线图像存储的React Native库。 该库为应用程序提供了脱机时显示预加载图像的大多数功能

Delphi XE10加载百度地图定位SDK

基于maplibre-native编译的apk

Mapbox4490版，可以加载CGCS2000坐标系数据源

ReactNative仿ofo共享单车App

百度地图jar包

文件系统中的React-Native图像缓存以及针对iOS和Android的渐进式加载-JavaScript开发

ANE-ImagePicker:ANE（AIR Native Extensions）解决方案在Android中正确加载图像

react-native-map-clustering：针对Android和iOS的React Native地图集群

tileserver-gl：具有GL样式的矢量和栅格地图。 Mapbox GL Native提供的服务器端渲染。 适用于Mapbox GL JS，Android，iOS，Leaflet，OpenLayers，通过WMTS的GIS等的地图图块服务器

React Native 官方文档中文版 - v1.3.pdf

WebView_jsp页面跳转到原生Activity

仿美团项目——ReactNative

gdal for android 开发包

AndroidNDK.rar_GoogleMap_android

将本地PC游戏轻松移植到Android的秘技-ch02

Android-iOS异步绘制与显示的工具类

flutter_native_map.zip

一个MapboxGLreactnative模块用于创建自定义地图

一份走心的JS-Native交互电子书

react-native-quick-maps:React Native Quick Map渲染本地地图（iOS

369html5-android

andriod GDAL 加载TIFF 图片格式文璟

React-Native组件.pdf

最新资源

react-native-image-offline:用于iOS和Android离线图像存储的React Native库。该库为应用程序提供了脱机时显示预加载图像的大多数功能

tileserver-gl：具有GL样式的矢量和栅格地图。 Mapbox GL Native提供的服务器端渲染。适用于Mapbox GL JS，Android，iOS，Leaflet，OpenLayers，通过WMTS的GIS等的地图图块服务器