Question

我正在使用 OpenStreetMap 创建一个简单的地图应用程序。我在MapView中打开了地图，并在地图上添加了标记。这一切都很好。 现在，当用户点击某个标记时，我应该弹出一个描述框，其中包含该地点的名称，描述和图像视图。

MainActivity ：

public class MainActivity extends Activity {

     MyItemizedOverlay myItemizedOverlay = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

         MapView mapView = (MapView) findViewById(R.id.mapview);
            mapView.setBuiltInZoomControls(true);

            Drawable marker=getResources().getDrawable(R.drawable.pin_for_map);
            int markerWidth = marker.getIntrinsicWidth();
            int markerHeight = marker.getIntrinsicHeight();
            marker.setBounds(0, markerHeight, markerWidth, 0);

            ResourceProxy resourceProxy = new DefaultResourceProxyImpl(getApplicationContext());

            myItemizedOverlay = new MyItemizedOverlay(marker, resourceProxy);
            mapView.getOverlays().add(myItemizedOverlay);

            GeoPoint myPoint1 = new GeoPoint(0*1000000, 0*1000000);
            myItemizedOverlay.addItem(myPoint1, "myPoint1", "myPoint1");
            GeoPoint myPoint2 = new GeoPoint(50*1000000, 50*1000000);
            myItemizedOverlay.addItem(myPoint2, "myPoint2", "myPoint2");
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

MyItemizedOverlay 类：

public class MyItemizedOverlay extends ItemizedOverlay<OverlayItem> {

 private ArrayList<OverlayItem> overlayItemList = new ArrayList<OverlayItem>();

 public MyItemizedOverlay(Drawable pDefaultMarker,
   ResourceProxy pResourceProxy) {
  super(pDefaultMarker, pResourceProxy);
  // TODO Auto-generated constructor stub
 }

 public void addItem(GeoPoint p, String title, String snippet){
  OverlayItem newItem = new OverlayItem(title, snippet, p);
  overlayItemList.add(newItem);
  populate(); 
 }

 @Override
 public boolean onSnapToItem(int arg0, int arg1, Point arg2, IMapView arg3) {
  // TODO Auto-generated method stub
  return false;
 }

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

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

}

activity_main.xml ：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:padding="5dp"
        android:text="@string/hello_world"
        tools:context=".MainActivity" />

    <org.osmdroid.views.MapView
        android:id="@+id/mapview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:clickable="true"/>

</RelativeLayout>

清单：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.openstreetmaptutorial"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="18" />

    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.openstreetmaptutorial.MainActivity"
            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>

请导入osmdroid-android-4.1.jar和slf4j-android-1.5.8.jar库并运行该项目。

我提到了this link。

我希望输出类似：

请建议我如何制作如上所示的弹出窗口

Answer 1

我已经解决了这个问题。首先，我创建了一个名为 custom_dialog.xml 的布局。代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:background="@drawable/bonuspack_bubble">

   <TextView
        android:id="@+id/map_popup_header"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="3dp"
        android:layout_marginTop="3dp"
        android:text="TextView" 
        android:textSize="15dp"
        android:textStyle="bold"/>

    <TextView
        android:id="@+id/map_popup_body"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/map_popup_header"
        android:layout_below="@+id/map_popup_header"
        android:layout_marginTop="5dp"
        android:text="TextView" 
        android:textSize="12dp"/>

    <ImageView
        android:id="@+id/map_more_info_imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/map_popup_body"
        android:layout_marginRight="5dp"
        android:src="@drawable/moreinfo_arrow" />

</RelativeLayout>

我已经编辑了 MapItemizedOverlay 类：

public class MapItemizedOverlay extends ItemizedOverlay<OverlayItem> {
    private ArrayList<OverlayItem> mOverlays = new ArrayList<OverlayItem>();
    private Context mContext;

    public MapItemizedOverlay(Drawable defaultMarker, Context context) {
        // super(boundCenterBottom(defaultMarker));
        super(defaultMarker, new DefaultResourceProxyImpl(context));
        mContext = context;
    }

    public void addOverlay(OverlayItem overlay) {
        mOverlays.add(overlay);
        populate();
    }

    @Override
    protected OverlayItem createItem(int i) {
        return mOverlays.get(i);
    }

    @Override
    public int size() {
        return mOverlays.size();
    }

    protected boolean onTap(int index) {
        OverlayItem item = mOverlays.get(index);

        Log.d("Title", item.getTitle());
        Log.d("Snippet", item.getSnippet());
        Log.d("Id", item.getUid());


         //set up dialog
        Dialog dialog = new Dialog(mContext);
        dialog.getWindow().requestFeature(Window.FEATURE_NO_TITLE);
        dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
        dialog.setContentView(R.layout.custom_dialog);
        //dialog.setTitle("This is my custom dialog box");

        dialog.setCancelable(true);
        //there are a lot of settings, for dialog, check them all out!

        //set up text
        TextView map_popup_header = (TextView) dialog.findViewById(R.id.map_popup_header);
        map_popup_header.setText(item.getTitle());

        TextView map_popup_body = (TextView) dialog.findViewById(R.id.map_popup_body);
        map_popup_body.setText(item.getSnippet());

        //set up button
        ImageView imgMoreInfo = (ImageView) dialog.findViewById(R.id.map_more_info_imageView);
        imgMoreInfo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
              Log.d("Clicked", "more info");
            }
        });
        //now that the dialog is set up, it's time to show it    
        dialog.show();

        return true;
    }

    // boolean onTap(GeoPoint p, MapView mapView)
    // {
    // return false;
    // }

    // @Override
    // public boolean onSnapToItem(int arg0, int arg1, Point arg2, MapView arg3)
    // {
    // // TODO Auto-generated method stub
    // return false;
    // }

    @Override
    public boolean onSnapToItem(int arg0, int arg1, Point arg2, IMapView arg3) {
        // TODO Auto-generated method stub
        return false;
    }

}

在地图上添加气泡的方法：

// =====For showing restaurant location======================//
    public void showFoodJoint(String foodJointId,double foodJointLat, double foodJointLon, String foodJointName, String foodJointDescription)
    {
        Drawable restaurantLocationDrawable = this.getResources().getDrawable(
                R.drawable.pin_for_restaurant_location);
        MapItemizedOverlay itemizedoverlayForRestaurant = new MapItemizedOverlay(
                restaurantLocationDrawable, this);

        GeoPoint myPoint1 = new GeoPoint(foodJointLat, foodJointLon);
        OverlayItem overlayitem2 = new OverlayItem(foodJointId,foodJointName,foodJointDescription, myPoint1);

        itemizedoverlayForRestaurant.addOverlay(overlayitem2);

        mapOverlays.add(itemizedoverlayForRestaurant);
    }

    // =====For showing restaurant location======================//

此方法应添加到主要活动。

输出：

Output image

Answer 2

您可以查看OSMBonusPack，https://code.google.com/p/osmbonuspack/

更改MyItemizedOverlay并使其扩展Marker课程。然后，创建另一个自定义类，扩展MarkerInfoWindow。以下一些示例：

1。CustomMarker课程：

private static class CustomMarker extends Marker
    {

        public CustomMarker(MapView mapView, ResourceProxy resourceProxy) {
            super(mapView, resourceProxy);
        }

        public CustomMarker(MapView mapView) {
            super(mapView);
        }

        public String name;
        public String desc;
    }

CustomInfoWindow上课：

公共类CustomInfoWindow扩展了MarkerInfoWindow {

    private CustomMarker marker;

    public CustomInfoWindow(MapView mapView) {
        super(R.layout.bonuspack_bubble, mapView);    
    }

    @Override
    public void onOpen(Object item) {
        marker = (CustomMarker) item;
        Button btn = (Button) (mView.findViewById(R.id.bubble_moreinfo));
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (marker != null) {
                    if (marker.name!= null && marker.desc!= null) {
                        btn.setText(title);
                        btn.setDescription(desc);
                    }
                }
            }
        });
    }
}

在code的某处：

public class MyClass extends Activity {

public MapView mapView;

@Override
protected void onCreate(Bundle load)
{
    super.onCreate(load);
    setContentView(R.layout.activity_map);
    mapView = (MapView)findViewById(R.id.map);

}

....


CustomMarker marker = new CustomMarker(mapView);//you can also pass "this" as argument I believe
marker.setPosition(locatedGeoPoint);
marker.name = "nomnom";
marker.desc = "nomming";
marker.setInfoWindow(new CustomInfoWindow((mapView));
marker.setOnMarkerClickListener(new Marker.OnMarkerClickListener() {
                        @Override
                        public boolean onMarkerClick(Marker item, MapView arg1) {
                            item.showInfoWindow();
                            return true;
                        }
                    });
}

我在这里发布了类似的答案：osmdroid workaround for the classic markers overlapping

R.layout.activity_map是一个简单的XML布局，其中包含MapView：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<org.osmdroid.views.MapView
      android:id="@+id/map"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"/>
</RelativeLayout>

使用图像onclick标记OpenStreetMap显示标记详细信息

2 个答案: