Google Maps Android API – phần 1

ngày 24-03-2016

Trong các bài tập tiếp theo đây Tui sẽ hướng dẫn các bạn từng bước tiếp cập với Google Map thông qua các bài tập mẫu từ dễ lên khó, với mong muốn giúp các bạn có thể tự lập trình cũng như cải tiến theo cách của mình và áp dụng một cách hiệu quả nhất vào ứng dụng của mình.
 
1) Cách Thiết lập Google Map trong ứng dụng Android:
 
Google Maps Android API (GMAA) bao gồm các dữ liệu bản đồ được phát triển bởi Google Inc cho phép lập trình viên tích hợp vào các ứng dụng thông qua các phương thức được cung cấp sẵn.
GMAA hỗ trợ các thao tác với giao diện đồ họa của bản đồ bao gồm:
 
 Vẽ biểu tượng trên bản đồ (Marker).
 Đồ họa đường thẳng (Polylines).
 Đồ họa hình đa giác (Polygons).
 Bitmap trên bản đồ (Ground & Tile Overlay).
 
Google Maps Android API Key: chuỗi mã hóa được Google cung cấp miễn phí để quản lý và chứng thực việc truy xuất dữ liệu bản đồ trên ứng dụng
(được lấy trên https://code.google.com/apis/console).
 
GMAA Key được liên kết thông qua Digital Cerfiticate (DC-Chứng thư số) và Pakage Name (Tên đóng gói) của ứng dụng.
 
Tạo GMAA Key bao gồm 3 bước chính như sau:
 
Bước 1: Truy xuất thông tin DC bằng mã SHA-1 (dùng command line hoặc từ eclipse).
Bước 2: Đăng ký Project trong Google API Console.
Bước 3: Tích hợp Google Map Service vào Project và gửi yêu cầu cấp GGMA Key.
 
Trong mọi ứng dụng liên quan tới Google Map thì cần Cấu hình tập tin AndroidManifest về một số thứ như:
 
Khai báo một số quyền truy cập phần cứng và sử dụng dữ liệu người dùng.
Việc xác định quyền sử dụng dữ liệu bản đồ thông qua GMAA KEY. KEY này được khai báo trong tag meta-data nằm trong tag application:
 

<meta-data

android:name="com.google.android.maps.v2.API_KEY"

android:value="API_KEY"/>

 

Với API_KEY là được lấy từ Google Developers

Khai báo version sử dụng:
 
<meta-data

            android:name="com.google.android.gms.version"

            android:value="@integer/google_play_services_version" />

 
Một số quyền cần thiết lập trong Manifest như sau:
 
<uses-permission android:name="android.permission.INTERNET" />

    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

 
Cần cung cấp OpenGL 2.0 cho việc đồ họa bản đồ:
 
<uses-feature

android:glEsVersion="0x00020000"

android:required="true"/>

 
Cuối cùng ta có một Manifest tương tự như sau:
 
<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="tranduythanh.com.learngooglemap"

    android:versionCode="1"

    android:versionName="1.0" >

 

    <uses-permission android:name="android.permission.INTERNET" />

    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

 

    <uses-feature

        android:glEsVersion="0x00020000"

        android:required="true" />

 

    <uses-sdk

        android:minSdkVersion="14"

        android:targetSdkVersion="19" />

 

    <application

        android:allowBackup="true"

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name"

        android:theme="@style/AppTheme" >

        <meta-data

            android:name="com.google.android.gms.version"

            android:value="@integer/google_play_services_version" />

        <meta-data

            android:name="com.google.android.maps.v2.API_KEY"

            android:value="AIzaSyAWPt-7pVRw-HUBoy9J8_YtB6qPDpp94lM" />

 

        <activity

            android:name=".MainActivity"

            android:label="@string/app_name" >

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

 

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

    </application>

 

</manifest>

 
Ở trên bạn thấy API_KEY =AIzaSyAWPt-7pVRw-HUBoy9J8_YtB6qPDpp94lM
 
Chi tiết lấy API_KEY sẽ được hướng dẫn ở bài sau.
 
2) Tương tác các đối tượng GoogleMap:
 
Tạo các đối tượng để thực hiện tương tác giữa ứng dụng với người dùng bao gồm:
 
GoogleMap:
 
 Kết nối đến Google Map Service.
 Tải dữ liệu bản đồ theo từng mảng nhỏ (tiles).
 Thể hiện dữ liệu bản đồ trên màn hình thiết bị.
 Thể hiện các điều khiển giao tiếp như thu phóng, la bàn…
 Xử lý các tương tác thu phóng, xoay, góc nhìn…
 
MapFragment: xây dựng giao diện bản đồ bằng cách xây dựng Fragment.
 
MapView: xây dựng giao diện bản đồ như một điều khiển và tương tác với Activity.
 
Truy xuất và sử dụng đối tượng GoogleMap từ thẻ fragment trong XML:
 
GoogleMap map = ((MapFragment)getFragmentManager().findFragmentById(R.id.map)).getMap();

map.setMapType(GoogleMap.MAP_TYPE_SATELLITE);

map.getUiSettings().setZoomControlsEnabled(true);

map.setMyLocationEnabled(true);

 
Hoặc:
 
MapFragment mapFragment = MapFragment.newInstance();

GoogleMap mMap = mapFragment.getMap();

mMap.setMapType(GoogleMap.MAP_TYPE_SATELLITE);

getFragmentManager().beginTransaction().add(R.id.container,mapFragment).commit();</pre>

 
Các kiểu giao diện hiển thị bản đồ mà Google Map cung cấp:
 
•  MAP_TYPE_NORMAL
 MAP_TYPE_HYBRID
 MAP_TYPE_NONE
 MAP_TYPE_SATELLITE
 MAP_TYPE_TERRAIN
 
 
Các kiểu này ta có thể dùng coding để thay đổi kiểu hiển thị thông qua hàm : setMapType(int)
 
Một số hình minh họa cách hiển thị:
 
 
Ta có thể thiết lập các giá trị ban đầu và điều khiển cho GoogleMap bao gồm:
 
 Góc nhìn (Camera)
 Thu phóng (zoom)
 Chuyển điểm (location)
 Xoay (bearing)
 Góc nghiêng (titl)
 La bàn và điều khiển thu phóng.
 Các điều khiển cử chỉ trên bản đồ.
 
Ta thiết lập các giá trị ban đầu và điều khiển cho GoogleMap trong layout XML:
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/LinearLayout1"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context="tranduythanh.com.learngooglemap.MainActivity" >

<fragment

android:id="@+id/map"

android:layout_width="match_parent"

android:layout_height="match_parent"

class="com.google.android.gms.maps.MapFragment"

/>

</LinearLayout>

 
Bạn để ý : class=”com.google.android.gms.maps.MapFragment”
 
Bạn có thể lấy fragment là root.
 
Ta cũng có thể thiết lập như sau:
 
<fragment xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/map"

android:layout_width="match_parent"

android:layout_height="match_parent"

class="com.google.android.gms.maps.SupportMapFragment"

</fragment>

 
Bạn để ý :  class=”com.google.android.gms.maps.SupportMapFragment”
 
Ta có thể thực hiện tùy chỉnh GoogleMap thông qua đối tượng GoogleMapOptions:
 
MapFragment.newInstance(GoogleMapOptions)

MapView(Context, GoogleMapOptions)

 
3) Thiết lập Đồ họa trên Google Map:
 
-Lớp Marker:
 
Lớp này được xây dựng sẵn cho việc sử dụng định vị tọa độ trên bản đồ, hiển thị  thông tin địa điểm và tương tác với người dùng:
 
Ví dụ dưới đây Tui lấy Kinh độ và vĩ độ của Trung Tâm Tin Học ĐH Khoa Học tự nhiên (cơ sở 357 Lê Hồng Phong)
 

LatLng TTTH_KHTN = new LatLng(10.763181, 106.675664);

MarkerOptions option=new MarkerOptions();

option.position(TTTH_KHTN);

option.title("Trung tâm tin học ĐH KHTN").snippet("This is cool");

option.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE));

option.alpha(0.8f);

option.rotation(90);

Marker maker = map.addMarker(option);

maker.showInfoWindow();

map.moveCamera(CameraUpdateFactory.newLatLngZoom(TTTH_KHTN, 15));

 
Nếu bạn thắc mắc làm sao lấy được kinh độ vĩ độ đúng như vậy thì có thể vào google Maps, tìm đúng địa điểm và nhấn chuột phải vào địa điểm đó/ chọn What is here:
 
 
Ta tùy chỉnh Marker bằng cách các thông số:
 
 Position
 Title
 Snippet
 Draggable
 Visible
 Anchor
 Icon
 
InfoWindow: được thể hiện phía trên đối tượng Marker  thể hiện các thông tin cần thiết về vị trí đang định vị.
Chỉ một đối tượng InfoWindow hiển thị ở một thời điểm và có thể điều khiển thông qua hai phương thức:
 
showInfoWindow()
hideInfoWindow()
 
Để tùy chỉnh InfoWindow trong lớp GoogleMap hỗ trợ giao diện InfoWindowAdapter bao gồm 2 phương thức:
 
getInfoWindow(Marker)
getInfoContents(Marker)
 
Ta gọi phương thức  setInfoWindowAdapter  để thiết lập InfoWindow cho đối tượng GoogleMap
 
Hình ví dụ mẫu:
 
 
Ngoài ra Google Maps API cung cấp các giao diện cho phép bắt lại các sự kiện tương với Marker và InfoWindow:
 
 OnMarkerClickListener
 OnMarkerDragListener
 OnInfoWindowClickListener
 
 
Ta cũng cần chú ý vì load Map có thể mất nhiều thời gian nên cần có ProgressBar để hiển thị cho người sử dụng không phải thắc mắc, thường ta dùng ProgressDialog để hiển thị trong thời gian chờ chương trình hoàn tất load Map. Ta có thể xử lý được việc hoàn tất load Map qua sự kiện sau:
 
map.setOnMapLoadedCallback(new OnMapLoadedCallback() {

@Override

public void onMapLoaded() {

// TODO Auto-generated method stub

//Xử lý ở đây nầy

Log.i("MAP LOADED", "END");

}

});

 
Như vậy Tui đã giới thiệu xong Google Maps Android API, các bạn có thể tham khảo thêm tại link: https://developers.google.com/maps/documentation/android/
 
Bài tập kế tiếp Tui sẽ hướng dẫn từng bước tạo 1 Project sử dụng Google Map như thế nào.
 
Các bạn chú ý theo dõi. Chúc các bạn thành công.
 

Nguồn: Thầy Trần Duy Thanh - Giảng viên tại Trung Tâm Tin Học ĐH Khoa Học Tự Nhiên

 

ai
Trung Tâm Tin Học
ai
Trung Tâm Tin Học
Chào mừng bạn đến với Trung Tâm Tin Học.
Bạn đang cần hỗ trợ thông tin gì ạ? Hãy Chat ngay với chúng tôi nhé.