Android 使用自定义Marker 在谷歌地图API

原文

http://www.nasc.fr/android/android-using-layout-as-custom-marker-on-google-map-api/


这是我的一个android开发案例

目的是用在Layout加上个自定义的TextView创建一个自定义Marker放在谷歌地图上


第一件要做的事情, 安装谷歌地图API V2为了得到API KEY(把key放到 manifest.xml)

所有的相关信息您可以在这找到:

http://developer.android.com/google/play-services/maps.html

你可以在这里得到API KEY:

https://code.google.com/apis/console/


我们创建一个 layout通过定义一个fragment 关联到 Google Map APi(这是谷歌地图提供的一个自称了Fragment的控件 com.google.android.gms.maps.SupportMapFragment)


layout/map_layout.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#FFFFFF" >
 
    <fragment
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
 
</RelativeLayout>

我们创建一个Layout 包含TextView 和 ImageView, 然后他通过转换Bitmap放到地图当中。


layout/custom_marker_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >
 
    <ImageView
        android:layout_width="55dp"
        android:layout_height="65dp"
        android:src="@drawable/custom_marker" />
 
    <TextView
        android:id="@+id/num_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="5dp"
        android:gravity="center"
        android:text="20"
        android:textColor="#ce8223"
        android:textSize="25dp"
        android:textStyle="bold" />
 
</RelativeLayout>
drawable/custom_marker.png


在CustomMapMaker class中,我们建立了Map(案例here).

我们得到layout custom_marker_layout 通过用 layout inflaer service, 我们改变我们的TextView和转换View成Bitmap(用 createDrawableFromView 方法)


CustomMapMarker.class


public class CustomMapMarker extends FragmentActivity {
private GoogleMap mMap;
private Marker customMarker;
private LatLng markerLatLng;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.map_layout);

markerLatLng = new LatLng(48.8567,2.3508);

setUpMapIfNeeded();
}

private void setUpMapIfNeeded() {
// Do a null check to confirm that we have not already instantiated the
// map.
if (mMap == null) {
// Try to obtain the map from the SupportMapFragment.
mMap = ((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map)).getMap();
// Check if we were successful in obtaining the map.
if (mMap != null) {
setUpMap();
}
}
}

private void setUpMap() {

View marker = ((LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.custom_marker_layout, null);
TextView numTxt = (TextView) marker.findViewById(R.id.num_txt);
numTxt.setText("27");

customMarker = mMap.addMarker(new MarkerOptions()
.position(markerLatLng)
.title("Title")
.snippet("Description")
.icon(BitmapDescriptorFactory.fromBitmap(createDrawableFromView(this, marker))));

final View mapView = getSupportFragmentManager().findFragmentById(R.id.map).getView();
if (mapView.getViewTreeObserver().isAlive()) {
mapView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
@SuppressLint("NewApi")
// We check which build version we are using.
@Override
public void onGlobalLayout() {
LatLngBounds bounds = new LatLngBounds.Builder().include(markerLatLng).build();
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
mapView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
} else {
mapView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
mMap.moveCamera(CameraUpdateFactory.newLatLngBounds(bounds, 50));
}
});
}
}

// Convert a view to bitmap
public static Bitmap createDrawableFromView(Context context, View view) {
DisplayMetrics displayMetrics = new DisplayMetrics();
((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
view.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
view.measure(displayMetrics.widthPixels, displayMetrics.heightPixels);
view.layout(0, 0, displayMetrics.widthPixels, displayMetrics.heightPixels);
view.buildDrawingCache();
Bitmap bitmap = Bitmap.createBitmap(view.getMeasuredWidth(), view.getMeasuredHeight(), Bitmap.Config.ARGB_8888);

Canvas canvas = new Canvas(bitmap);
view.draw(canvas);

return bitmap;
}
}
预览 




Google Maps Android API v2 useful links:
https://developers.google.com/maps/documentation/android/start
https://developers.google.com/maps/documentation/android/map
https://code.google.com/apis/console/
http://developer.android.com/google/play-services/index.html


Project sources on GitHub:
https://github.com/Nasc/CustomMapMarker


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值