หน้าเว็บ

วันจันทร์ที่ 2 เมษายน พ.ศ. 2555

การปักหมุด และ การทำ balloon popup google map android

package com.app.na5cent.library;

import java.text.DecimalFormat;
import android.content.Context;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Point;
import android.graphics.drawable.Drawable;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

import com.google.android.maps.GeoPoint;
import com.google.android.maps.MapController;
import com.google.android.maps.MapView;
import com.google.android.maps.Overlay;
import com.google.android.maps.Projection;

import com.app.na5cent.ProfileActivity;
import com.app.na5cent.R;
import com.app.na5cent.User;

public class MapUserMarker extends Overlay {

    private Context context;
    private User user;
    private GeoPoint gop;
    private LinearLayout view;
    private LayoutInflater inflater;

    public MapUserMarker(Context context, User user) {
        this.context = context;
        this.user = user;
        loadContent();
    }

    private void loadContent() {
        gop = new GeoPoint((int) (this.user.getLocation().getLatitute() * 1E6), (int) (this.user.getLocation().getLongitude() * 1E6));
        inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        view = (LinearLayout) inflater.inflate(R.layout.balloon_popup, null);
        new ImageLoader(((ImageView) view.findViewById(R.id.popup_img))).execute(this.user.getImage());
    }

    @Override
    public boolean draw(Canvas canvas, MapView mapview, boolean shadow, long when) {
        super.draw(canvas, mapview, shadow);
        Projection projection = mapview.getProjection();
        Point screenPts = new Point();
        projection.toPixels(this.gop, screenPts);
        Bitmap bmp;
        if (user.getType().equals("0")) {
            bmp = BitmapFactory.decodeResource(context.getResources(), R.drawable.point_blue);
            canvas.drawBitmap(bmp, screenPts.x - 20, screenPts.y - 20, null);
            return true;
        } else if (user.getType().equals("2")) {
            bmp = BitmapFactory.decodeResource(context.getResources(), R.drawable.user_marker);
        } else if (user.getType().equals("1")) {
            bmp = BitmapFactory.decodeResource(context.getResources(), R.drawable.friends_marker);
        } else {
            bmp = BitmapFactory.decodeResource(context.getResources(), R.drawable.other_marker);
        }
        canvas.drawBitmap(bmp, screenPts.x - 33, screenPts.y - 67, null);
        return true;
    }

    public boolean onTap(GeoPoint g, MapView m) {
        Point pointTap = m.getProjection().toPixels(g, null);
        Point pointMap = m.getProjection().toPixels(this.gop, null);
        double x1 = pointMap.x - 3;
        double y1 = pointMap.y - 30;
        double x2 = pointTap.x;
        double y2 = pointTap.y;
        double r = Math.sqrt(
                Math.pow((x1 - x2), 2)
                + Math.pow((y1 - y2), 2));
        if (r <= 25) {
            m.getController().animateTo(this.gop);
            drawPopUp(this.gop, m);
            return true;
        }
        return super.onTap(g, m);
    }

    private void drawPopUp(GeoPoint g, MapView m) {
        LayoutParams lp;
        lp = new MapView.LayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT,
                ViewGroup.LayoutParams.WRAP_CONTENT,
                g,
                -232,
                -350,
                LayoutParams.WRAP_CONTENT);

        Intent in = new Intent(context, ProfileActivity.class);
        in.putExtra("id", this.user.getId());

        ((ImageView) view.findViewById(R.id.popup_img)).setOnClickListener(new ImageClick(in));
        ((ImageView) view.findViewById(R.id.popup_exit)).setOnClickListener(new PopupExit(m));
        ((TextView) view.findViewById(R.id.popup_uname)).setText(this.user.getName());
        ((TextView) view.findViewById(R.id.popup_about)).setText(this.user.getAbout());
        ((TextView) view.findViewById(R.id.popup_distance)).setText("distance : " + this.user.getDistance());
        m.removeAllViewsInLayout();
        m.invalidate();
        m.addView(view, lp);
        m.invalidate();
    }

    private class PopupExit implements OnClickListener {

        private MapView map;

        public PopupExit(MapView m) {
            this.map = m;
        }

        @Override
        public void onClick(View v) {
            this.map.removeAllViewsInLayout();
            this.map.invalidate();
        }
    }

    private class ImageClick implements OnClickListener {

        private Intent in;

        public ImageClick(Intent i) {
            this.in = i;
        }

        @Override
        public void onClick(View v) {
            context.startActivity(in);
        }
    }
}

การใช้งาน
    private List<OverLay> list;
    private MapUserMarker mapusermarker;
    private MapCircleUserMarker mapcircleusermarker;
    private void drawUserMarker(){
        int number_of_user = userOnLocation.length;
        mapusermarker = null;
        mapcircleusermarker = null;
        mapusermarker = new MapUserMarker[number_of_user];
        mapcircleusermarker = new MapCircleUserMarker();         
        mapcircleusermarker.setLatitudeLongtiudeRadiusSearchAround(                
             requestl.getLocation(),
             radius_search_around
        );
        list = mapview.getOverlays();
        list.clear();
        list.add(mapcircleusermarker);

        for(int i=number_of_user-1; i >= 0; i--){
            mapusermarker[i] = new MapUserMarker(
                MapActivity.this,
                userOnLocation[i]
            );
            list.add(mapusermarker[i]);
        }
    }

เมื่อเราคลิ๊กที่ icon ก็จะมี balloon popup เด้งขึ้นมาซึ่งจะอยู่บนหัวของ icon นั้นๆ ถ้าต้องการปิดก็กดที่เครื่องหมายกากบาทครับ balloon นั้นก็จะหายไปเอง

อันนี้เป็น class ที่ผมเขียนเอาไว้น่ะครับ


เราจะต้องสร้าง form balloon popup ขึ้นมาครับ เป็นไฟล์ .xml  เก็บไว้ในโฟลเดอร์ layout ครับ  ผมตั้งชื่อเป็น balloon_popup.xml  การอ้างถึงเราจะอ้างโดยใช้ R.layout.balloon_popup
        balloon popup เป็นเพียงแค่รูปภาพธรรมดาครับ ผมตั้งชื่อว่า balloon_popup_gradient.png  เอาไว้ในโฟลเดอร์เก็บรูปภาพของแอนดรอยด์(Drawable) ซึ่งผมก็ใช้ photoshop แต่งให้สวยงามเอา  จากนั้นก็นำมาใส่ในไฟล์ balloon_popup.xml  แล้วก็จัด Layout ตาม pattern ที่ต้องการครับ

















5 ความคิดเห็น:

  1. คืออยากทราบว่า ถ้าต้องการเอา button ใส่เข้าไปใน balloon popup ที่เด้งขึ้นมาแล้ว สามารถกดไปหน้าอื่น หรือการกระทำอย่างอื่น สามารถทำได้อย่างไรครับ รบกวนช่วยตอบทีครับ ขอบคุงครับ

    ตอบลบ
  2. ถึงคุณดอนครับ
    ที่จริง ที่คุณดอนต้องการเอาปุ่มมาใส่ในบอลลูน ก็แค่เขียน xml โดยใส่ปุ่มเข้าไป
    จากนั้น ในทุกๆปุ่มก็จะมี id ใช่มั้ยครับ ทีนี้เราก็เขียน event onclick ผูกกับปุ่มนั้น
    แต่จากตัวอย่างผมเป็นรูปภาพ โดยถ้าคลิกที่รูปภาพ ก็จะกระโดดไปหน้าโปรไฟล์
    คุณดอน ก็แค่เปลี่ยนจากรูปภาพให้กลายไปเป็นปุ่มแค่นั้นเองครับ

    ตอบลบ
  3. ขอบคุณสำหรับบทความนะครับ

    คุณกาแดง พอจะรู้เรื่องการดึงพิกัดจากดาต้าเบส (MySQL) มาแสดงบนกูเกิ้ลแมพส์อีกทีไหมครับ

    ตอบลบ
  4. ผมเคยทำแต่แบบไปขอข้อมูลจาก server โดยคำนวณพิกัดของผู้ใช้ที่อยู่ใกล้เคียงด้วยรัศมี โดยใช้ GPS น่ะครับ
    http://na5cent.blogspot.com/2012/03/mysql-search-around-algorithm-finding.html

    ตอบลบ
  5. ขอโทษนะครับผมเพิ่งหัดเขียน อยากถามว่า

    import com.app.na5cent.ProfileActivity;
    import com.app.na5cent.R;
    import com.app.na5cent.User;

    ใน ProfileActivity , R , User

    ต้องมีอะไรบ้างหรอครับ

    ขอดูหน่อยได้ไหมครับ

    ขอบคุณมากครับ

    ตอบลบ