基于MapBox在Android应用中集成地图支持

译文
移动开发 Android
MapBox是一个开源的矢量地图SDK。此框架的承诺是在开发视频游戏方面将提供优质的渲染速度和平滑度。如果你有兴趣将地图功能集成到你的应用程序,那么MapBox将是值得你考虑的选择方案之一。

一、 简介

MapBox是一个开源的矢量地图SDK。此框架的承诺是在开发视频游戏方面将提供优质的渲染速度和平滑度。如果你有兴趣将地图功能集成到你的应用程序,那么MapBox将是值得你考虑的选择方案之一。

二、权限设置

首先需要说明的是,你可以从GitHub网站下载到本文提供的源代码,地址是https://github.com/sitepoint-editors/MapBox-App

要想在你的应用程序如使用Mapbox,你需要一个API访问令牌。为此,你需要先创建一个Mapbox帐户,你可以在网站https://www.mapbox.com/studio/account/tokens处找到你需要的有类数据。

然后,把令牌添加到你的Android程序的文件strings.xml中:

  1. <string name="accessToken">Your access token</string> 

接下来,在配置文件AndroidManifest.xml中加入如下所示的Internet和位置访问权限:

 

  1. <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>  
  2. <uses-permission android:name="android.permission.INTERNET"/>   
  3. <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> 
  4. <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> 
  5. <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/> 

请注意:在Android Marshmallow (API 23)及更高的版本中在运行时是需要上述权限的。

三、安装MapBox

接下来,打开配置文件build.gradle(对应于Module: app文件夹下的那个),添加对MapBox的依赖。请参考如下所示配置代码:

  1. repositories { 
  2.     mavenCentral() 
  3. dependencies { 
  4.     . . .   
  5.     compile('com.mapbox.mapboxsdk:mapbox-android-sdk:3.2.0@aar') { 
  6.         transitive = true 
  7.    } 
  8.     compile ('com.mapbox.mapboxsdk:mapbox-android-directions:1.0.0@aar'){  
  9.         transitive=true 
  10.     } 

上面代码中的***处配置描述了Mapbox,后面的配置则对应于目录库(Directions library)描述,用于向应用程序提供驾车、步行以及跨自行车等调用函数,并支持在地图中绘制其行踪。

四、MapBox布局

接下来,打开布局文件content_main.xml,使用如下内容替换原来的内容:

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  3.     xmlns:mapbox="http://schemas.android.com/apk/res-auto" 
  4.     xmlns:tools="http://schemas.android.com/tools" 
  5.     android:layout_width="match_parent" 
  6.     android:layout_height="match_parent" 
  7.     tools:context="com.example.valdio.mapboxintegration.MainActivity" 
  8.     tools:showIn="@layout/activity_main"> 
  9.     <com.mapbox.mapboxsdk.views.MapView 
  10.         android:id="@+id/mapview" 
  11.         android:layout_width="fill_parent" 
  12.         android:layout_height="fill_parent" 
  13.         mapbox:access_token="@string/accessToken" /> 
  14. </RelativeLayout> 

接下来,初始化你需要在MainActivity文件中使用的变量:

  1. public class MainActivity extends AppCompatActivity { 
  2.   private MapView mapView = null
  3.   private String MAPBOX_ACCESS_TOKEN = ""
  4.   private DirectionsRoute currentRoute = null
  5.   ... 

接下来,在MainActivity.java文件中,把onCreate()方法中的创建工具栏和浮动按钮的代码删除,添加如下代码来初始化地图:

  1. String MAPBOX_ACCESS_TOKEN = getResources().getString(R.string.accessToken); 
  2. // Set up a standard Mapbox map 
  3. MapView mapView = (MapView) findViewById(R.id.mapview); 
  4. mapView.setAccessToken(MAPBOX_ACCESS_TOKEN); 
  5. mapView.setStyleUrl(Style.MAPBOX_STREETS); // specify the map style  
  6. mapView.setZoom(14); // zoom level  
  7. mapView.onCreate(savedInstanceState); 

Mapbox需要实现Activity的生命同期方法以避免运行时错误;因此,需要添加如下的重写函数:

  1. @Override  
  2. protected void onStart() {  
  3.     super.onStart();  
  4.     mapView.onStart();  
  5. @Override 
  6. protected void onStop() {  
  7.     super.onStop();  
  8.     mapView.onStop();  
  9. @Override  
  10. protected void onDestroy() { 
  11.     super.onDestroy();  
  12.     mapView.onDestroy();  
  13.  
  14. @Override  
  15. protected void onResume() { 
  16.     super.onResume(); 
  17.     mapView.onResume(); 
  18. @Override 
  19. protected void onPause() {  
  20.     super.onPause(); 
  21.     mapView.onPause(); 
  22.  
  23. @Override 
  24. protected void onSaveInstanceState(Bundle outState) {  
  25.     super.onSaveInstanceState(outState); 
  26.     mapView.onSaveInstanceState(outState); 

好了。现在配置好了Mapbox,可以构建应用程序了。

五、把标记添加到地图中

现在,请把如下代码添加到MainActivity的onCreate函数的***部:

  1. @Override 
  2. protected void onStart() { 
  3.     super.onStart(); 
  4.     mapView.onStart(); 
  5. @Override  
  6. protected void onStop() { 
  7.     super.onStop(); 
  8.     mapView.onStop(); 
  9. @Override 
  10. protected void onDestroy() { 
  11.     super.onDestroy(); 
  12.     mapView.onDestroy(); 
  13. @Override 
  14. protected void onResume() {  
  15.     super.onResume();  
  16.     mapView.onResume();  
  17.  
  18. @Override  
  19. protected void onPause() {  
  20.     super.onPause(); 
  21.     mapView.onPause();  
  22.  
  23. @Override  
  24. protected void onSaveInstanceState(Bundle outState) { 
  25.     super.onSaveInstanceState(outState);  
  26.     mapView.onSaveInstanceState(outState);  

这段代码中的CameraPosition是一个非常有用的Mapbox类,可用于设置用户视图的位置、角度、缩放和倾斜度,等等信息。

到现在,我们的地图看起来是如下所示的模样:

 

六、获取设备位置

为了使Mapbox能够访问到设置的位置信息,必须启动设置的位置服务,程序应当有使用它们的权限。如前面所提到的,在Android Marshmallow (API 23)及后续更高的版本中,在运行时是需要这些权限的。

现在,我们来创建一个新的函数,在其中加入取得当前位置的代码:

  1. private void myLocation() { 
  2.         if (ActivityCompat.checkSelfPermission(this, Manifest.permission.ACCESS_FINE_LOCATION) != PackageManager.PERMISSION_GRANTED && ActivityCompat.checkSelfPermission(this, Manifest.permission.ACCESS_COARSE_LOCATION) != PackageManager.PERMISSION_GRANTED) { 
  3.             // TODO: Consider calling  
  4.             //    ActivityCompat#requestPermissions  
  5.             // here to request the missing permissions, and then overriding  
  6.             //   public void onRequestPermissionsResult(int requestCode, String[] permissions,  
  7.             //                                          int[] grantResults)  
  8.             // to handle the case where the user grants the permission. See the documentation  
  9.             // for ActivityCompat#requestPermissions for more details.  
  10.             return;  
  11.         } 
  12.         mapView.setMyLocationEnabled(true); 
  13.         mapView.setMyLocationTrackingMode(MyLocationTracking.TRACKING_FOLLOW);  
  14.         mapView.getMyLocation();  
  15.     } 

然后,在地图初始化代码后添加如下函数调用:

  1. ...  
  2. mapView.onCreate(savedInstanceState);  
  3. myLocation(); 

在现在的情况中,我们把跟踪方式设置为TRACKING_FOLLOW,这意味着用户的位置将持续不断地被监控,而且地图会不断地随着变化不断更新。

七、在地图上绘制线路

现在,我们创建了标记与位置,接下来就是在地图上绘制线路了。

这要使用前面在依赖性设置时所导入的第二个库(Directions library),这也是Mapbox团队自行开发的。

下面描述了其工作原理:

1、创建两个航点位置,一个是出发点,一个对应目的地。

2、创建一个MapboxDirections生成器对象,用于向Mapbox API发出网络请求,其中的数据包含对应于出发点和目的点的航点位置信息,还有方向路线有关的配置信息(驾驶、步行或骑自行车等)。

3、异步执行方向要求。其中,MapboxDirections类提供了一个使用Retrofit API的内置的异步请求。具体地说,是使用enqueue()函数来执行请求。

4、OnResponse()方法返回Retrofit响应结果,这是一个标准的JSON API响应。

5、响应正文中包含位置坐标对信息,稍后这些坐标将绘制在地图上。

6、采用Mapbox Polyline函数把坐标绘制在地图上。折线(Polyline)是一种几何特征,通过多条线段首尾相连而形成一条不封闭的折线。

为了使用Direction库,我们需要获得设备的位置作为起源航点,以及由用户通过长按方式来指定目的地航点的位置信息。

八、加入航点位置并在目标地添加标记

现在,请把如下代码添加到onCreate方法的***面:

  1. mapView.setOnMapLongClickListener(new MapView.OnMapLongClickListener() {  
  2.     @Override  
  3.     public void onMapLongClick(LatLng point) { 
  4.         //Remove previously added markers  
  5.         //Marker is an annotation that shows an icon image at a geographical location  
  6.         //so all markers can be removed with the removeAllAnnotations() method. 
  7.          mapView.removeAllAnnotations();  
  8.         // Set the origin waypoint to the devices location  
  9.         Waypoint origin = new Waypoint(mapView.getMyLocation().getLongitude(), mapView.getMyLocation().getLatitude());  
  10.         // Set the destination waypoint to the location point long clicked by the user  
  11.         Waypoint destination = new Waypoint(point.getLongitude(), point.getLatitude());  
  12.         // Add marker to the destination waypoint  
  13.         mapView.addMarker(new MarkerOptions()  
  14.                 .position(new LatLng(point))  
  15.                 .title("Destination Marker") 
  16.                 .snippet("My destination")); 
  17.         // Get route from API 
  18.         getRoute(origin, destination);     } 
  19.  
  20. }); 

九、创建MapboxDirections网络请求并异步运行

接下来,再创建一个如下所示的方法,以便取得***路由信息:

  1. private void getRoute(Waypoint origin, Waypoint destination) { 
  2.   MapboxDirections directions = new MapboxDirections.Builder()  
  3.           .setAccessToken(MAPBOX_ACCESS_TOKEN) 
  4.           .setOrigin(origin) 
  5.           .setDestination(destination)  
  6.           .setProfile(DirectionsCriteria.PROFILE_WALKING)  
  7.           .build(); 
  8.   directions.enqueue(new Callback<DirectionsResponse>() {  
  9.       @Override  
  10.       public void onResponse(Response<DirectionsResponse> response, Retrofit retrofit) {  
  11.           // Display some info about the route  
  12.           currentRoute = response.body().getRoutes().get(0); 
  13.           showToastMessage(String.format("You are %d meters \nfrom your destination", currentRoute.getDistance()));     
  14.           // Draw the route on the map  
  15.           drawRoute(currentRoute);  
  16.       } 
  17.       @Override  
  18.       public void onFailure(Throwable t) { 
  19.           showToastMessage("Error: " + t.getMessage());  
  20.       }  
  21.   });  

十、使用地图上的坐标点绘制折线

再添加一个如下方法来实现路由绘制:

  1. private void drawRoute(DirectionsRoute route) {  
  2.   // Convert List<Waypoint> into LatLng[]  
  3.   List<Waypoint> waypoints = route.getGeometry().getWaypoints();  
  4.   LatLng[] point = new LatLng[waypoints.size()];  
  5.   for (int i = 0; i < waypoints.size(); i++) {  
  6.       point[i] = new LatLng(  
  7.               waypoints.get(i).getLatitude(),  
  8.               waypoints.get(i).getLongitude());  
  9.   }
  10.    // Draw Points on MapView  
  11.   mapView.addPolyline(new PolylineOptions()  
  12.           .add(point)  
  13.           .color(Color.parseColor("#38afea"))  
  14.           .width(5));  
  15. private void showToastMessage(String message) {  
  16.   Toast.makeText(this, message, Toast.LENGTH_SHORT).show();  

好了,现在运行你的工程。在地图上选择两个点,你会观察到类似于下图所示结果:

十一、小结

本文中,我们介绍了使用MapBox SDK及其Directory库的基本知识。其实,MapBox还有更多更丰富的内容可应用于你的程序中,例如不同的地图风格,实现定制的矢量地图绘制等等。

作为本文补充,我还推荐另一个库Geocoding(https://github.com/mapbox/mapbox-geocoder-android)。这个库可以把坐标信息转换成地图,或者实现相反的转换。当然,要想了解更多的有关MapBox信息,建议学习其移动应用有关实例(https://www.mapbox.com/mobile/)。在这个网址中你会发现更多的库可用。

责任编辑:李英杰 来源: 51CTO
相关推荐

2009-01-03 15:01:16

ibmdwLptus

2009-06-23 09:33:20

FCKEditorJSFJSP

2009-06-01 16:18:30

SpringJPA集成

2011-07-20 17:10:05

iPhone iAd

2009-01-03 14:43:55

ibmdwPHPsMash

2014-09-28 14:53:39

渗透BurpSuiteSqlmap

2011-06-29 09:42:12

Visual Stud Qt Opensource

2009-06-11 13:28:18

Glassfish集成

2011-03-04 09:40:42

AJAX开发集成数据库

2012-10-18 10:12:42

IBMdw

2024-01-31 09:42:11

RabbitMQ消息队列.NET

2023-03-13 00:16:28

2023-12-26 14:52:52

谷歌

2011-03-02 17:42:35

2012-06-07 09:57:13

Android版Goo

2018-01-02 08:30:45

IntelCPU

2011-08-23 09:50:29

LuaPlusLua 脚本

2021-03-17 08:07:56

Python可视化工具

2014-12-31 09:56:29

Ehcache

2021-11-01 14:52:38

ElasticSear索引SQL
点赞
收藏

51CTO技术栈公众号