Android: Hiển thị Zoom View trong Google Maps

Android: Hiển thị Zoom View trong Google Maps

Ở bài 1 chúng ta đã hiển thị được Google Maps trên ứng dụng. 1 chức năng tất yếu của Maps là zoom in và zoom out, trong bài này chúng ta sẽ thêm chức năng này vào ứng dụng Google Maps của mình.

Lưu ý : Bạn vẫn tiếp tục sử dụng project ở bài 1.

Đầu tiên , trong Layout main.xml bạn thêm 1 LinearLayout để chứa ZoomControl:

?
1
2
3
4
5
6
7
<LinearLayout android:id ="@+id/zoom"
    android:layout_width ="wrap_content"
    android:layout_height = "wrap_content"
    android:layout_alignParentBottom = "true"
    android:layout_centerHorizontal = "true"
    />

File main.xml của bạn sẽ như sau :

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?xml version="1.0" encoding="utf-8"?>
 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    />   
    <com.google.android.maps.MapView android:id="@+id/myMap"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:apiKey="0tl5xRhVSFoXlIq3NfZ97l4zLTKLVHtklJ-D5CQ"
        android:layout_x="2px"
        android:layout_y="100px"
        android:clickable="true" />
    
    <LinearLayout android:id ="@+id/zoom"
        android:layout_width ="wrap_content"
        android:layout_height = "wrap_content"
        android:layout_alignParentBottom = "true"
        android:layout_centerHorizontal = "true"
        />
        
</RelativeLayout>

Trong GoogleMapsActivity.java bạn thêm vào đoạn code sau để hiển thị Zoom Control

?
1
2
3
4
5
6
7
//Add zoom view to Google Maps
mapView = (MapView)findViewById(R.id.myMap);
LinearLayout zoomLayout = (LinearLayout)findViewById(R.id.zoom);
View zoomView = mapView.getZoomControls();
zoomLayout.addView(zoomView, new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
mapView.displayZoomControls(true);

Như các bạn thấy, ta phải khai báo đối tượng mapView của lớp MapView để điều khiển GoogleMaps, và phương thức :

?
1
View zoomView = mapView.getZoomControls();

để trả lại View của ZoomControl.

Full sourcecode của lớp GoogleMapsActivity.java :

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
package com.vietandroid.tut.map;
 
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
 
import com.google.android.maps.MapActivity;
import com.google.android.maps.MapController;
import com.google.android.maps.MapView;
 
public class GoogleMapsActivity extends MapActivity {
 
    MapView mapView;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        //Add zoom view to Google Maps
        mapView = (MapView)findViewById(R.id.myMap);
        LinearLayout zoomLayout = (LinearLayout)findViewById(R.id.zoom);
        View zoomView = mapView.getZoomControls();
        zoomLayout.addView(zoomView, new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
        mapView.displayZoomControls(true);
    }
 
    @Override
    protected boolean isRouteDisplayed() {
        // TODO Auto-generated method stub
        return false;
    }
}

Chạy chương trình :

Download SourceCode

Nếu muốn bổ sung thêm phím tắt để dùng chức năng ZoomIn và ZoomOut , các bạn có thể Override phương thức onKeyDown() để bắt sự kiện khi bấm phím:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    // TODO Auto-generated method stub
    
    MapController mc = mapView.getController();
    switch (keyCode) {
    case KeyEvent.KEYCODE_I:
            mc.zoomIn();
            break;
    case KeyEvent.KEYCODE_O:
            mc.zoomOut();
            break;
    }
    return super.onKeyDown(keyCode, event);
}

Như trên mình sử dụng phím I để zoomIn, phím O để zoomOut.

Download SourceCode : Clickhere

Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Tommy Tran

Tommy Tran owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies

  • Skype ID: tthanhthuy
  • Phone/Zalo: (+84) 944 225 212
  • WhatsApp: (+84) 944 225 212
  • Line Messenger: (+84) 944 225 212
  • Email: asaleotestf@gmail.com
  • Telegram Messenger: https:/t.me/tommytran0401

Quảng cáo việc làm

 

Thích hợp các bạn nữ mảng thợ may làm việc tại nước NGA

Đơn hàng Tuyển dụng 100 Thợ may đi Nga(đợt 1 tháng 3.2021, đợt 2 tháng 5.2021). Lương thực lãnh 800 USD, bao ăn ở, vé máy bay và visa, phí xuất cảnh(1800 USD)trả khi đi làm có lương. Bạn có thể liên hệ CÔNG TY qua Phone/Zalo: (+84) 944 225 212. Công ty sẽ tư vấn cho bạn.

Xem chi tiết: >>> https://bit.ly/3o9NOfR

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
34 Câu hỏi về iPad mới (Phần 2)

34 Câu hỏi về iPad mới (Phần 2)

Những thắc mắc về chip xử lý và đồ họa, mạng 3G hay 4G, tuổi thọ pin, thời gian sạc, Bluetooth 4.0, loa của iPad mới? Tìm câu trả lời ở đây!

Kindle Fire hay iPad 2?

Kindle Fire hay iPad 2? - Lựa chọn theo nhu cầu của bạn

So sánh các tính năng của 2 chiếc máy tính bảng đình đám: Kindle Fire & iPad 2

Hướng dẫn Show Drupal Users Their Own Content

Hướng dẫn Show Drupal Users Their Own Content

There are advanced ways to do this, such as using the Workbench module, but in this tutorial we'll show you an easy way to provide a list of each user's content.