在 Android 上以原生方式显示标记弹出窗口

发布于 2024-12-16 02:34:10 字数 271 浏览 0 评论 0原文

我想在 Android 上的 MapView 中的一些标记之上放置一个弹出窗口,类似于 iPhone 的标注。我到处都看到每个人都推荐第 3 方 API 来做到这一点?

没有本地方法可以做到这一点吗?我需要添加一些基本信息,例如文本和按钮,我的首要任务是在每部 Android 手机上尽可能地原生,因为它们或多或少都有所不同。

以下是本机地图应用程序的示例:

在此处输入图像描述

I want to put a pop-up on top of some markers in a MapView on Android, something like the iPhone's callouts. I see everywhere that everybody recommends 3rd party API's in order to do this?

Is there no native way to do this? I need to put some basic info, like a text and a button and my priority is to be as native as I can on each android phone, because they all differ more or less.

Here is an example from the native map app:

enter image description here

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

写下不归期 2024-12-23 02:34:10

是的,在 Android 中它要容易得多。
这是代码;

的 MapActivity 类中声明此变量(或者更好的是在互联网上阅读有关此变量的信息)

    private List<Overlay> mapOverlays;
    private CustomItemizedOverlay customItemizedOverlay;

在 onCreate() 中

    mapOverlays = mapView.getOverlays();
    customItemizedOverlay = new CustomItemizedOverlay(
            GoogleMapsActivity.this);
     if (arrayList != null) {
    //here Marker is my custom class which contains GeoPoints
            for (Marker marker : arrayList) {
                GeoPoint point = new GeoPoint(
                    (int) (marker.getLat() * 1E6),
                    (int) (marker.getLng() * 1E6));

                OverlayItem overlayitem = new OverlayItem(point,
                    marker.getTitle(), marker.getDescription());
                customItemizedOverlay.addOverlay(overlayitem);
            }
    //finally add all GeoPoints to the mapOverlays
            mapOverlays.add(customItemizedOverlay);
            if (arrayList.size() > 0) {
                GeoPoint geoPoint = new GeoPoint((int) (arrayList.get(1)
                    .getLat() * 1E6),
                    (int) (arrayList.get(1).getLng() * 1E6));
                int currentapiVersion = android.os.Build.VERSION.SDK_INT;
                if (currentapiVersion >= android.os.Build.VERSION_CODES.FROYO) {
                mapController.animateTo(geoPoint, new Message());
                }
            }

public MapView getMapView() {
    return this.mapView;
    }

这是我的 CustomItemizedOverlay 类的代码(它可能会让您感到惊讶)

public class CustomItemizedOverlay extends ItemizedOverlay<OverlayItem>
    implements OnKeyListener {
    private final Bitmap bitMap;
    private ViewFlipper viewFlipper;
    private final ArrayList<OverlayItem> overLayItems = new ArrayList<OverlayItem>();
    private final GoogleMapsActivity googleMapsActivity;
    public int selectedIndex = -1;
    private View view = null;
    private RelativeLayout relativeLayout = null;
    private static WebView webView;

    public CustomItemizedOverlay(GoogleMapsActivity googleMapsActivity) {
    super(boundCenterBottom(googleMapsActivity.getResources().getDrawable(
        R.drawable.pingreen)));
    this.googleMapsActivity = googleMapsActivity;
    bitMap = BitmapFactory.decodeResource(
        googleMapsActivity.getResources(), R.drawable.pingreen);
    populate();
    }

    @Override
    public boolean draw(Canvas canvas, MapView mapView, boolean shadow,
        long when) {
    if (overLayItems == null || overLayItems.isEmpty()) {
        return false;
    }
    return super.draw(canvas, mapView, false, when);
    }

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

    @Override
    protected OverlayItem createItem(int index) {
    return overLayItems.get(index);
    }

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

    public void refresh() {
    populate();
    }

    public void clear() {
    overLayItems.clear();
    resetLastFocuesIndex();
    }

    @Override
    protected boolean onTap(final int index) {
    googleMapsActivity.getMapView().setOnTouchListener(
        new OnTouchListener() {
            @Override
            public boolean onTouch(View arg0, MotionEvent arg1) {
            if (!overLayItems.isEmpty()) {
                if (view != null) {
                view.setVisibility(View.GONE);
                }
            }
            googleMapsActivity.getMapView().invalidate();
            return false;
            }
        });
    if (view != null) {
        view.setVisibility(View.GONE);
        googleMapsActivity.getMapView().removeView(view);
        googleMapsActivity.getMapView().invalidate();
        view = null;
    }
    view = googleMapsActivity.getLayoutInflater().inflate(
        R.layout.popupwindow, null);
    LinearLayout layout = (LinearLayout) view.findViewById(R.id.layout);
    layout.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,
        LayoutParams.WRAP_CONTENT));
    view.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,
        LayoutParams.WRAP_CONTENT));
    view.setBackgroundResource(R.drawable.popupwindow);
    ImageView image = (ImageView) view.findViewById(R.id.imageview);
    TextView text = (TextView) view.findViewById(R.id.text);
    text.setText(overLayItems.get(index).getTitle());

    if (overLayItems.get(index).getTitle() != null
        && overLayItems.get(index).getTitle().equals("Me") == false) {
        image.setImageResource(R.drawable.wwwpd);
    }

    Projection projection = googleMapsActivity.getMapView().getProjection();
    Point point = new Point();
    projection.toPixels(overLayItems.get(index).getPoint(), point);

    int x = (int) (view.getWidth() / 2f);
    int y = -bitMap.getHeight() - 3;

    MapView.LayoutParams lp = new MapView.LayoutParams(
        ViewGroup.LayoutParams.WRAP_CONTENT,
        ViewGroup.LayoutParams.WRAP_CONTENT, overLayItems.get(index)
            .getPoint(), x, y, MapView.LayoutParams.BOTTOM_CENTER);
    googleMapsActivity.getMapView().removeView(view);
    googleMapsActivity.getMapView().invalidate();
    googleMapsActivity.getMapView().addView(view, lp);
    googleMapsActivity.getMapView().invalidate();

    view.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View arg0) {
        if (Common.haveNetworkConnection(googleMapsActivity)) {
            googleMapsActivity.getMapView().removeView(view);
            googleMapsActivity.getMapView().invalidate();
            view = null;
            String desription = googleMapsActivity.getMarkersList()
                .get(index).getDescription();
            String str1 = desription.substring(
                desription.indexOf("\"") + 1, desription.length());
            String str2 = str1.substring(0, str1.indexOf("\""));

            viewFlipper = (ViewFlipper) googleMapsActivity
                .findViewById(R.id.flipper);
            viewFlipper.setDisplayedChild(2);

            relativeLayout = (RelativeLayout) googleMapsActivity
                .findViewById(R.id.relativeLayout);
            Button button = new Button(googleMapsActivity);
            button.setText("Back");
            button.setId(1);
            RelativeLayout.LayoutParams params1 = new RelativeLayout.LayoutParams(
                LayoutParams.WRAP_CONTENT,
                LayoutParams.WRAP_CONTENT);
            params1.addRule(RelativeLayout.ALIGN_PARENT_TOP);
            params1.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
            button.setLayoutParams(params1);
            button.setVisibility(View.GONE);
            button.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                viewFlipper.setDisplayedChild(0);
            }
            });
            relativeLayout.addView(button);

            webView = new WebView((Context) (googleMapsActivity
                .getParent() == null ? this : googleMapsActivity
                .getParent()));
            webView.setId(2);
            webView.getSettings().setDefaultZoom(ZoomDensity.MEDIUM);
            webView.getSettings().setJavaScriptEnabled(true);
            webView.getSettings().setSupportZoom(true);
            webView.getSettings().setBuiltInZoomControls(true);
            // webView.getSettings()
            // .setUserAgentString(
            // "Mozilla/5.0 (Linux; U; Android 2.3.3; en-au; GT-I9100 Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.12011-10-16 20:22:55");

            RelativeLayout.LayoutParams params2 = new RelativeLayout.LayoutParams(
                LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
            webView.setLayoutParams(params2);
            params2.addRule(RelativeLayout.BELOW, 1);
            relativeLayout.addView(webView);

            webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view,
                String url) {
                view.loadUrl(url);
                return super.shouldOverrideUrlLoading(view, url);

            }

            @Override
            public void onPageStarted(WebView view, String url,
                Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                viewFlipper.setDisplayedChild(2);
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                viewFlipper.setDisplayedChild(1);
                webView.requestFocus(View.FOCUS_DOWN);
                webView.setOnTouchListener(new View.OnTouchListener() {
                @Override
                public boolean onTouch(View v, MotionEvent event) {
                    switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                    case MotionEvent.ACTION_UP:
                    if (!v.hasFocus()) {
                        v.requestFocus();
                    }
                    break;
                    }
                    return false;
                }
                });
            }

            @Override
            public void onReceivedError(WebView view,
                int errorCode, String description,
                String failingUrl) {
                super.onReceivedError(view, errorCode, description,
                    failingUrl);
                viewFlipper.setDisplayedChild(0);
            }
            });

            webView.setOnKeyListener(new OnKeyListener() {

            @Override
            public boolean onKey(View view, int keyCode,
                KeyEvent keyEvent) {
                if ((keyCode == KeyEvent.KEYCODE_BACK)
                    && webView.canGoBack()) {
                webView.goBack();
                return true;
                }
                googleMapsActivity.finish();
                return true;
            }
            });
            webView.loadUrl(str2);
        }
        }
    });
    selectedIndex = index;
    return true;
    }

    public void resetLastFocuesIndex() {
    setLastFocusedIndex(-1);
    selectedIndex = -1;
    }

    @Override
    public boolean onKey(View view, int keyCode, KeyEvent keyEvent) {
    if (keyCode == KeyEvent.KEYCODE_BACK) {
        viewFlipper.showPrevious();
        return true;
    }
    return true;
    }
}

Yes its pretty much easier in android.
Here is the code;

Declare this variables in your MapActivity class(or better would be reading about this variables on the internet)

    private List<Overlay> mapOverlays;
    private CustomItemizedOverlay customItemizedOverlay;

in your onCreate()

    mapOverlays = mapView.getOverlays();
    customItemizedOverlay = new CustomItemizedOverlay(
            GoogleMapsActivity.this);
     if (arrayList != null) {
    //here Marker is my custom class which contains GeoPoints
            for (Marker marker : arrayList) {
                GeoPoint point = new GeoPoint(
                    (int) (marker.getLat() * 1E6),
                    (int) (marker.getLng() * 1E6));

                OverlayItem overlayitem = new OverlayItem(point,
                    marker.getTitle(), marker.getDescription());
                customItemizedOverlay.addOverlay(overlayitem);
            }
    //finally add all GeoPoints to the mapOverlays
            mapOverlays.add(customItemizedOverlay);
            if (arrayList.size() > 0) {
                GeoPoint geoPoint = new GeoPoint((int) (arrayList.get(1)
                    .getLat() * 1E6),
                    (int) (arrayList.get(1).getLng() * 1E6));
                int currentapiVersion = android.os.Build.VERSION.SDK_INT;
                if (currentapiVersion >= android.os.Build.VERSION_CODES.FROYO) {
                mapController.animateTo(geoPoint, new Message());
                }
            }

public MapView getMapView() {
    return this.mapView;
    }

Here is code for my CustomItemizedOverlay class (It may freak you out)

public class CustomItemizedOverlay extends ItemizedOverlay<OverlayItem>
    implements OnKeyListener {
    private final Bitmap bitMap;
    private ViewFlipper viewFlipper;
    private final ArrayList<OverlayItem> overLayItems = new ArrayList<OverlayItem>();
    private final GoogleMapsActivity googleMapsActivity;
    public int selectedIndex = -1;
    private View view = null;
    private RelativeLayout relativeLayout = null;
    private static WebView webView;

    public CustomItemizedOverlay(GoogleMapsActivity googleMapsActivity) {
    super(boundCenterBottom(googleMapsActivity.getResources().getDrawable(
        R.drawable.pingreen)));
    this.googleMapsActivity = googleMapsActivity;
    bitMap = BitmapFactory.decodeResource(
        googleMapsActivity.getResources(), R.drawable.pingreen);
    populate();
    }

    @Override
    public boolean draw(Canvas canvas, MapView mapView, boolean shadow,
        long when) {
    if (overLayItems == null || overLayItems.isEmpty()) {
        return false;
    }
    return super.draw(canvas, mapView, false, when);
    }

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

    @Override
    protected OverlayItem createItem(int index) {
    return overLayItems.get(index);
    }

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

    public void refresh() {
    populate();
    }

    public void clear() {
    overLayItems.clear();
    resetLastFocuesIndex();
    }

    @Override
    protected boolean onTap(final int index) {
    googleMapsActivity.getMapView().setOnTouchListener(
        new OnTouchListener() {
            @Override
            public boolean onTouch(View arg0, MotionEvent arg1) {
            if (!overLayItems.isEmpty()) {
                if (view != null) {
                view.setVisibility(View.GONE);
                }
            }
            googleMapsActivity.getMapView().invalidate();
            return false;
            }
        });
    if (view != null) {
        view.setVisibility(View.GONE);
        googleMapsActivity.getMapView().removeView(view);
        googleMapsActivity.getMapView().invalidate();
        view = null;
    }
    view = googleMapsActivity.getLayoutInflater().inflate(
        R.layout.popupwindow, null);
    LinearLayout layout = (LinearLayout) view.findViewById(R.id.layout);
    layout.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,
        LayoutParams.WRAP_CONTENT));
    view.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,
        LayoutParams.WRAP_CONTENT));
    view.setBackgroundResource(R.drawable.popupwindow);
    ImageView image = (ImageView) view.findViewById(R.id.imageview);
    TextView text = (TextView) view.findViewById(R.id.text);
    text.setText(overLayItems.get(index).getTitle());

    if (overLayItems.get(index).getTitle() != null
        && overLayItems.get(index).getTitle().equals("Me") == false) {
        image.setImageResource(R.drawable.wwwpd);
    }

    Projection projection = googleMapsActivity.getMapView().getProjection();
    Point point = new Point();
    projection.toPixels(overLayItems.get(index).getPoint(), point);

    int x = (int) (view.getWidth() / 2f);
    int y = -bitMap.getHeight() - 3;

    MapView.LayoutParams lp = new MapView.LayoutParams(
        ViewGroup.LayoutParams.WRAP_CONTENT,
        ViewGroup.LayoutParams.WRAP_CONTENT, overLayItems.get(index)
            .getPoint(), x, y, MapView.LayoutParams.BOTTOM_CENTER);
    googleMapsActivity.getMapView().removeView(view);
    googleMapsActivity.getMapView().invalidate();
    googleMapsActivity.getMapView().addView(view, lp);
    googleMapsActivity.getMapView().invalidate();

    view.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View arg0) {
        if (Common.haveNetworkConnection(googleMapsActivity)) {
            googleMapsActivity.getMapView().removeView(view);
            googleMapsActivity.getMapView().invalidate();
            view = null;
            String desription = googleMapsActivity.getMarkersList()
                .get(index).getDescription();
            String str1 = desription.substring(
                desription.indexOf("\"") + 1, desription.length());
            String str2 = str1.substring(0, str1.indexOf("\""));

            viewFlipper = (ViewFlipper) googleMapsActivity
                .findViewById(R.id.flipper);
            viewFlipper.setDisplayedChild(2);

            relativeLayout = (RelativeLayout) googleMapsActivity
                .findViewById(R.id.relativeLayout);
            Button button = new Button(googleMapsActivity);
            button.setText("Back");
            button.setId(1);
            RelativeLayout.LayoutParams params1 = new RelativeLayout.LayoutParams(
                LayoutParams.WRAP_CONTENT,
                LayoutParams.WRAP_CONTENT);
            params1.addRule(RelativeLayout.ALIGN_PARENT_TOP);
            params1.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
            button.setLayoutParams(params1);
            button.setVisibility(View.GONE);
            button.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                viewFlipper.setDisplayedChild(0);
            }
            });
            relativeLayout.addView(button);

            webView = new WebView((Context) (googleMapsActivity
                .getParent() == null ? this : googleMapsActivity
                .getParent()));
            webView.setId(2);
            webView.getSettings().setDefaultZoom(ZoomDensity.MEDIUM);
            webView.getSettings().setJavaScriptEnabled(true);
            webView.getSettings().setSupportZoom(true);
            webView.getSettings().setBuiltInZoomControls(true);
            // webView.getSettings()
            // .setUserAgentString(
            // "Mozilla/5.0 (Linux; U; Android 2.3.3; en-au; GT-I9100 Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.12011-10-16 20:22:55");

            RelativeLayout.LayoutParams params2 = new RelativeLayout.LayoutParams(
                LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
            webView.setLayoutParams(params2);
            params2.addRule(RelativeLayout.BELOW, 1);
            relativeLayout.addView(webView);

            webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view,
                String url) {
                view.loadUrl(url);
                return super.shouldOverrideUrlLoading(view, url);

            }

            @Override
            public void onPageStarted(WebView view, String url,
                Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                viewFlipper.setDisplayedChild(2);
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                viewFlipper.setDisplayedChild(1);
                webView.requestFocus(View.FOCUS_DOWN);
                webView.setOnTouchListener(new View.OnTouchListener() {
                @Override
                public boolean onTouch(View v, MotionEvent event) {
                    switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                    case MotionEvent.ACTION_UP:
                    if (!v.hasFocus()) {
                        v.requestFocus();
                    }
                    break;
                    }
                    return false;
                }
                });
            }

            @Override
            public void onReceivedError(WebView view,
                int errorCode, String description,
                String failingUrl) {
                super.onReceivedError(view, errorCode, description,
                    failingUrl);
                viewFlipper.setDisplayedChild(0);
            }
            });

            webView.setOnKeyListener(new OnKeyListener() {

            @Override
            public boolean onKey(View view, int keyCode,
                KeyEvent keyEvent) {
                if ((keyCode == KeyEvent.KEYCODE_BACK)
                    && webView.canGoBack()) {
                webView.goBack();
                return true;
                }
                googleMapsActivity.finish();
                return true;
            }
            });
            webView.loadUrl(str2);
        }
        }
    });
    selectedIndex = index;
    return true;
    }

    public void resetLastFocuesIndex() {
    setLastFocusedIndex(-1);
    selectedIndex = -1;
    }

    @Override
    public boolean onKey(View view, int keyCode, KeyEvent keyEvent) {
    if (keyCode == KeyEvent.KEYCODE_BACK) {
        viewFlipper.showPrevious();
        return true;
    }
    return true;
    }
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文