android mapview实现弹出层功能

7,281 views

分享一个点击地图实现标注,并且点击该点标注显示该点的经纬度(通过弹出层)的功能。如图-1所示。通过弹出层可以显示更为复杂的布局,点击关闭按钮即可删除显示层。

图-1. mapview弹出层功能

主要思路:1.第一步当然是要让地图显示出来,并设置相关的参数。

2.布局好弹出层的xml布局文件。

3.第三步是关键的的思路,重写boolean onTap(int index)和boolean onTap(GeoPoint p, MapView mapView) 的方法。这两个方法还是有区别的。至于这两个函数的一些区别一击点击地图获取经纬度功能的说明,可以参考之前写的一篇文章android 实现点击地图获取经纬度功能
PopItemizedOverlay是继承了ItemizedOverlay的类,是核心的功能类,通过重写相关的方法实现弹出层的功能。

源代码:

1.PopItemizedOverlay.java

package com.pop.main;

import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Canvas;
import android.graphics.drawable.Drawable;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import com.google.android.maps.GeoPoint;
import com.google.android.maps.ItemizedOverlay;
import com.google.android.maps.MapView;
import com.google.android.maps.OverlayItem;

public class PopItemizedOverlay extends ItemizedOverlay<OverlayItem> {

private ArrayList<OverlayItem> mOverlays = new ArrayList<OverlayItem>();
private Context context;
private View popView;

private MapviewPopoverlayActivity markView;
private MapView mapView;
// 显示经纬度的控件
private TextView latitude;
private TextView longitude;

public PopItemizedOverlay(List<GeoPoint> points, Drawable defaultMarker,
MapView mapView, Context context) {
// Wrap this around our defaultMarker
super(boundCenterBottom(defaultMarker));
this.context = context;
markView = (MapviewPopoverlayActivity) context;
this.mapView = mapView;
// 初始化popView弹出层的布局
LayoutInflater mLayoutInflater = LayoutInflater.from(context);
popView = mLayoutInflater.inflate(R.layout.overlay_pop, null);
mapView.addView(popView, new MapView.LayoutParams(
MapView.LayoutParams.WRAP_CONTENT,
MapView.LayoutParams.WRAP_CONTENT, null,
MapView.LayoutParams.BOTTOM_CENTER));
// 初始化popView并不可见
popView.setVisibility(View.GONE);
// 这是一个标注的图标
Resources r = this.context.getResources();
r.getDrawable(R.drawable.current);
}

@Override
protected OverlayItem createItem(int i) {
// TODO Auto-generated method stub
return mOverlays.get(i);
}

// OverlayItem
@Override
public int size() {
// TODO Auto-generated method stub
return mOverlays.size();
}

// 点击地图标注显示的内容
@Override
protected boolean onTap(int index) {
super.onTap(index);
setFocus(mOverlays.get(index));
MapView.LayoutParams geoLP = (MapView.LayoutParams) popView
.getLayoutParams();
geoLP.point = mOverlays.get(index).getPoint();
float lat = mOverlays.get(index).getPoint().getLatitudeE6();
float lon = mOverlays.get(index).getPoint().getLongitudeE6();
mapView.updateViewLayout(popView, geoLP);
popView.setVisibility(View.VISIBLE);
latitude = (TextView) markView.findViewById(R.id.map_lat);
longitude = (TextView) markView.findViewById(R.id.map_lon);
latitude.setText("纬度:" + (lat / 1000000));
longitude.setText("经度:" + (lon / 1000000));

ImageView imageView = (ImageView) markView
.findViewById(R.id.map_bubbleImage);
imageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

popView.setVisibility(View.GONE);
}

});
// 将点击的标注(及弹出层)移到中心显示
mapView.getController().animateTo(mOverlays.get(index).getPoint());

// 返回true
return true;
}

@Override
public void draw(Canvas canvas, MapView mapView, boolean shadow) {
// TODO Auto-generated method stub
super.draw(canvas, mapView, shadow);

}

// 添加Overlay
public void addOverlay(OverlayItem overlay) {
// add OverlayItems
mOverlays.add(overlay);
populate();
}

@Override
public boolean onTap(GeoPoint p, MapView mapView) {
// TODO Auto-generated method stub
boolean flag = super.onTap(p, mapView);
// 判断是否点击了图标,没有点击图标则在该点添加图标,否则弹出层
if (!flag) {
OverlayItem overlayitem = new OverlayItem(p, "标题", "内容");
addOverlay(overlayitem);
// 将标注的点移动到地图中心
mapView.getController().animateTo(p);
}
// 返回false
return false;
}

}

2.MapviewPopoverlayActivity.java

package com.pop.main;

import java.util.ArrayList;
import java.util.List;

import com.google.android.maps.GeoPoint;
import com.google.android.maps.MapActivity;
import com.google.android.maps.MapController;
import com.google.android.maps.MapView;
import com.google.android.maps.Overlay;
import com.google.android.maps.OverlayItem;
import android.content.res.Resources;
import android.graphics.drawable.Drawable;
import android.os.Bundle;

public class MapviewPopoverlayActivity extends MapActivity {
// 地图控件的变量
private MapController mapController;
private List<GeoPoint> updatePoints = new ArrayList<GeoPoint>();
private List<Overlay> mapOverlays;
private MapView mapView;

private final double defaultLat = 22.5334233464;
private final double defaultLng = 113.99265567524;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 初始化
initView();
}

private void initView() {
setContentView(R.layout.main);
// 地图控件初始化
mapView = (MapView) findViewById(R.id.mapview);
mapView.setClickable(true);
mapView.setBuiltInZoomControls(true);
mapController = mapView.getController();
mapView.setTraffic(true);// 交通图
mapView.setSatellite(false);// 卫星图
// mapView.setStreetView(true);//街景
mapOverlays = mapView.getOverlays();
mapController.setZoom(18);
// 定义一个经纬度
GeoPoint gpoint = new GeoPoint((int) (defaultLat * 1000000),
(int) (defaultLng * 1000000));

Resources r = this.getResources();
Drawable drawale = r.getDrawable(R.drawable.current);
// 添加一点标注位置
updatePoints.add(gpoint);
// 该点的信息
OverlayItem overlayitem = new OverlayItem(gpoint, "标题", "内容");
PopItemizedOverlay iconOverlay = new PopItemizedOverlay(updatePoints,
drawale, mapView, this);
// 添加图层
iconOverlay.addOverlay(overlayitem);
mapOverlays.add(iconOverlay);
// 移到中间
mapController.animateTo(gpoint);
}

@Override
protected boolean isRouteDisplayed() {
// TODO Auto-generated method stub
return false;
}
}

布局文件:

3.main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<com.google.android.maps.MapView
android:id="@+id/mapview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:apiKey="0bICReSImsEtRPbHuEqVDRVQBqmnCXuJb89ntcg" />
</LinearLayout>

4.overlay_pop.xml

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="@drawable/pop" >
<FrameLayout android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/map_bubbleTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:layout_gravity="center_horizontal"
android:padding="12dp"
android:text="信息提示"
android:singleLine="true" />
<ImageView
android:id="@+id/map_bubbleImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|top"
android:padding="12dp"
android:paddingBottom="12dp"
android:background="@drawable/close" />
</FrameLayout>
<TextView
android:id="@+id/map_lat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="12dp"
android:singleLine="false" />
<TextView
android:id="@+id/map_lon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="12dp"
android:singleLine="false" />
</LinearLayout>

5.AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.pop.main"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk android:minSdkVersion="7" />
<!-- 互联网访问权限 -->
<uses-permission android:name="android.permission.INTERNET" />
<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name" >
<!-- Google地图库 -->
<uses-library android:name="com.google.android.maps" />
<activity
android:name=".MapviewPopoverlayActivity"
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>

源码下载:MapviewPopoverlay.zip

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>