Android 맵 API v2로 맞춤형 비트맵 마커를 만드는 방법
구글 맵 API v2를 사용하는 안드로이드 어플리케이션을 개발하고 있습니다.사용자 지정 마커가 있는 지도에 사용자 위치를 표시해야 합니다.
각 마커는 URL에서 사용자의 사진을 보여줍니다.서버에서 비동기 모드로 이미지를 다운로드해야 합니다.첨부된 스크린샷의 예를 참고하세요.
마커에 이미지와 사용자 정의 정보를 추가하려면 어떻게 해야 합니까?
Google Maps API v2 데모에는 다음이 있습니다.MarkerDemoActivity사용자 지정 이미지가 GoogleMap으로 설정된 방법을 볼 수 있는 클래스입니다.
// Uses a custom icon.
mSydney = mMap.addMarker(new MarkerOptions()
.position(SYDNEY)
.title("Sydney")
.snippet("Population: 4,627,300")
.icon(BitmapDescriptorFactory.fromResource(R.drawable.arrow)));
마커를 이미지로 대체하기 때문에 사용할 수 있습니다.Canvas좀 더 복잡하고 멋진 것들을 그리기 위해:
Bitmap.Config conf = Bitmap.Config.ARGB_8888;
Bitmap bmp = Bitmap.createBitmap(80, 80, conf);
Canvas canvas1 = new Canvas(bmp);
// paint defines the text color, stroke width and size
Paint color = new Paint();
color.setTextSize(35);
color.setColor(Color.BLACK);
// modify canvas
canvas1.drawBitmap(BitmapFactory.decodeResource(getResources(),
R.drawable.user_picture_image), 0,0, color);
canvas1.drawText("User Name!", 30, 40, color);
// add marker to Map
mMap.addMarker(new MarkerOptions()
.position(USER_POSITION)
.icon(BitmapDescriptorFactory.fromBitmap(bmp))
// Specifies the anchor to be at a particular point in the marker image.
.anchor(0.5f, 1));
캔버스 그리기canvas1위에GoogleMap mMap. 코드는 (대부분) 그 자체로 말해야 합니다. 코드를 그리는 방법은 많은 튜토리얼이 있습니다.Canvas. Android Developer 페이지에서 Canvas and Drawables를 보는 것으로 시작할 수 있습니다.
이제 URL에서 사진도 다운로드하려고 합니다.
URL url = new URL(user_image_url);
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
conn.setDoInput(true);
conn.connect();
InputStream is = conn.getInputStream();
bmImg = BitmapFactory.decodeStream(is);
백그라운드 스레드에서 이미지를 다운로드해야 합니다(SyncTask 또는 Volley 또는 RxJava를 사용할 수 있음).
그 후에 당신은 교체할 수 있습니다.BitmapFactory.decodeResource(getResources(), R.drawable.user_picture_image)다운로드 받은 이미지로bmImg.
또한 사용자 지정 마커 레이아웃을 만들어 비트맵으로 변환하는 것이 더 쉬운 대안입니다.
view_custom_marker.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/custom_marker_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/marker_mask">
<ImageView
android:id="@+id/profile_image"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_gravity="center_horizontal"
android:contentDescription="@null"
android:src="@drawable/avatar" />
</FrameLayout>
아래 코드를 사용하여 이 보기를 비트맵으로 변환
private Bitmap getMarkerBitmapFromView(@DrawableRes int resId) {
View customMarkerView = ((LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.view_custom_marker, null);
ImageView markerImageView = (ImageView) customMarkerView.findViewById(R.id.profile_image);
markerImageView.setImageResource(resId);
customMarkerView.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
customMarkerView.layout(0, 0, customMarkerView.getMeasuredWidth(), customMarkerView.getMeasuredHeight());
customMarkerView.buildDrawingCache();
Bitmap returnedBitmap = Bitmap.createBitmap(customMarkerView.getMeasuredWidth(), customMarkerView.getMeasuredHeight(),
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(returnedBitmap);
canvas.drawColor(Color.WHITE, PorterDuff.Mode.SRC_IN);
Drawable drawable = customMarkerView.getBackground();
if (drawable != null)
drawable.draw(canvas);
customMarkerView.draw(canvas);
return returnedBitmap;
}
Map ready callback에서 사용자 지정 마커를 추가합니다.
@Override
public void onMapReady(GoogleMap googleMap) {
Log.d(TAG, "onMapReady() called with");
mGoogleMap = googleMap;
MapsInitializer.initialize(this);
addCustomMarker();
}
private void addCustomMarker() {
Log.d(TAG, "addCustomMarker()");
if (mGoogleMap == null) {
return;
}
// adding a marker on map with image from drawable
mGoogleMap.addMarker(new MarkerOptions()
.position(mDummyLatLng)
.icon(BitmapDescriptorFactory.fromBitmap(getMarkerBitmapFromView(R.drawable.avatar))));
}
제 해결책을 공유하기에 아직 늦지 않았길 바랍니다.그 전에 안드로이드 개발자 설명서에 나와 있는 대로 자습서를 따라가면 됩니다.이를 달성하려면 클러스터 관리자를 사용해야 합니다.defaultRenderer.
구현하는 개체 만들기
ClusterItempublic class SampleJob implements ClusterItem { private double latitude; private double longitude; //Create constructor, getter and setter here @Override public LatLng getPosition() { return new LatLng(latitude, longitude); }기본 렌더러 클래스를 만듭니다.이 클래스는 모든 작업(사용자 정의 마커/클러스터를 자신만의 스타일로 부풀리기)을 수행합니다.이미지 다운로드 및 캐싱은 유니버셜 이미지 로더를 사용하고 있습니다.
public class JobRenderer extends DefaultClusterRenderer< SampleJob > { private final IconGenerator iconGenerator; private final IconGenerator clusterIconGenerator; private final ImageView imageView; private final ImageView clusterImageView; private final int markerWidth; private final int markerHeight; private final String TAG = "ClusterRenderer"; private DisplayImageOptions options; public JobRenderer(Context context, GoogleMap map, ClusterManager<SampleJob> clusterManager) { super(context, map, clusterManager); // initialize cluster icon generator clusterIconGenerator = new IconGenerator(context.getApplicationContext()); View clusterView = LayoutInflater.from(context).inflate(R.layout.multi_profile, null); clusterIconGenerator.setContentView(clusterView); clusterImageView = (ImageView) clusterView.findViewById(R.id.image); // initialize cluster item icon generator iconGenerator = new IconGenerator(context.getApplicationContext()); imageView = new ImageView(context.getApplicationContext()); markerWidth = (int) context.getResources().getDimension(R.dimen.custom_profile_image); markerHeight = (int) context.getResources().getDimension(R.dimen.custom_profile_image); imageView.setLayoutParams(new ViewGroup.LayoutParams(markerWidth, markerHeight)); int padding = (int) context.getResources().getDimension(R.dimen.custom_profile_padding); imageView.setPadding(padding, padding, padding, padding); iconGenerator.setContentView(imageView); options = new DisplayImageOptions.Builder() .showImageOnLoading(R.drawable.circle_icon_logo) .showImageForEmptyUri(R.drawable.circle_icon_logo) .showImageOnFail(R.drawable.circle_icon_logo) .cacheInMemory(false) .cacheOnDisk(true) .considerExifParams(true) .bitmapConfig(Bitmap.Config.RGB_565) .build(); } @Override protected void onBeforeClusterItemRendered(SampleJob job, MarkerOptions markerOptions) { ImageLoader.getInstance().displayImage(job.getJobImageURL(), imageView, options); Bitmap icon = iconGenerator.makeIcon(job.getName()); markerOptions.icon(BitmapDescriptorFactory.fromBitmap(icon)).title(job.getName()); } @Override protected void onBeforeClusterRendered(Cluster<SampleJob> cluster, MarkerOptions markerOptions) { Iterator<Job> iterator = cluster.getItems().iterator(); ImageLoader.getInstance().displayImage(iterator.next().getJobImageURL(), clusterImageView, options); Bitmap icon = clusterIconGenerator.makeIcon(iterator.next().getName()); markerOptions.icon(BitmapDescriptorFactory.fromBitmap(icon)); } @Override protected boolean shouldRenderAsCluster(Cluster cluster) { return cluster.getSize() > 1; }활동/프래그먼트 클래스에 클러스터 관리자를 적용합니다.
public class SampleActivity extends AppCompatActivity implements OnMapReadyCallback { private ClusterManager<SampleJob> mClusterManager; private GoogleMap mMap; private ArrayList<SampleJob> jobs = new ArrayList<SampleJob>(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_landing); SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager() .findFragmentById(R.id.map); mapFragment.getMapAsync(this); } @Override public void onMapReady(GoogleMap googleMap) { mMap = googleMap; mMap.getUiSettings().setMapToolbarEnabled(true); mClusterManager = new ClusterManager<SampleJob>(this, mMap); mClusterManager.setRenderer(new JobRenderer(this, mMap, mClusterManager)); mMap.setOnCameraChangeListener(mClusterManager); mMap.setOnMarkerClickListener(mClusterManager); //Assume that we already have arraylist of jobs for(final SampleJob job: jobs){ mClusterManager.addItem(job); } mClusterManager.cluster(); }결과
람다 답변을 통해 요구사항에 좀 더 근접한 것을 만들었습니다.
boolean imageCreated = false;
Bitmap bmp = null;
Marker currentLocationMarker;
private void doSomeCustomizationForMarker(LatLng currentLocation) {
if (!imageCreated) {
imageCreated = true;
Bitmap.Config conf = Bitmap.Config.ARGB_8888;
bmp = Bitmap.createBitmap(400, 400, conf);
Canvas canvas1 = new Canvas(bmp);
Paint color = new Paint();
color.setTextSize(30);
color.setColor(Color.WHITE);
BitmapFactory.Options opt = new BitmapFactory.Options();
opt.inMutable = true;
Bitmap imageBitmap=BitmapFactory.decodeResource(getResources(),
R.drawable.messi,opt);
Bitmap resized = Bitmap.createScaledBitmap(imageBitmap, 320, 320, true);
canvas1.drawBitmap(resized, 40, 40, color);
canvas1.drawText("Le Messi", 30, 40, color);
currentLocationMarker = mMap.addMarker(new MarkerOptions().position(currentLocation)
.icon(BitmapDescriptorFactory.fromBitmap(bmp))
// Specifies the anchor to be at a particular point in the marker image.
.anchor(0.5f, 1));
} else {
currentLocationMarker.setPosition(currentLocation);
}
}
언급URL : https://stackoverflow.com/questions/14811579/how-to-create-a-custom-shaped-bitmap-marker-with-android-map-api-v2
'programing' 카테고리의 다른 글
| URL 문자열이 절대적인지 또는 상대적인지 테스트하는 방법은 무엇입니까? (0) | 2023.09.27 |
|---|---|
| ASP에서 보기의 레이아웃(Master Page)을 변경합니다.재생성하지 않고 NET MVC (0) | 2023.09.27 |
| 변경된 청취자 편집 텍스트에서 문자 수 계산 (0) | 2023.09.27 |
| 구글 웹 폰트를 CSS 파일로 가져오는 방법은? (0) | 2023.09.27 |
| 시스템 부팅 시 도커 컨테이너가 자동으로 시작되도록 하려면 어떻게 해야 합니까? (0) | 2023.09.27 |