Android：如何制作一个可点击的地图图像，每个国家都有不同的动作？答案

【问题标题】：Android: how to make a clickable map image with each country producing a different action?Android：如何制作一个可点击的地图图像，每个国家都有不同的动作？
【发布时间】：2010-10-18 16:15:16
【问题描述】：

我需要显示一张漂亮的欧洲地图图像，并且我希望我的应用能够，例如当用户单击每个国家/地区时，会显示不同的活动 - 地图上的每个国家/地区都需要具有不同的 onClickListener（或等效项）。

本质上，当用户点击法国而不是西班牙时，我需要能够调用不同的函数，如下所示： http://commons.wikimedia.org/wiki/File:Blank_map_of_Europe_cropped.svg

在 Android 上我最好如何处理？

我有一些想法，但我可能忽略了一些简单的方法。

非常感谢！

干杯， r3mo

【问题讨论】：

你到底怎么能从点击的点推断出国家？听者充其量只会知道屏幕坐标，仅此而已。它不会知道屏幕上的国界在哪里
确实，听者只会知道点击的坐标。两种方法：让地图由许多带有听众的图像组成，每个国家一张，都在一定程度上重叠，这样地图看起来正确。也许有一些方法可以做到这一点？或者，我将对每个国家/地区进行稍微不同的着色（1 位），以使它们看起来都相同，但我可以检查单击的图像坐标处的颜色并在表格中查找该颜色对应的国家/地区到。尽管我感谢您抽出宝贵时间发表评论，但也许其他人可以尝试提供更多帮助？
clickable area of image的可能重复

标签： android image

【解决方案1】：

这是我解决类似问题的方法。

首先复制您要用作图像映射的图像并为每个部分着色。不用说，每个部分都有不同的颜色：D。然后在您的布局中创建两个 ImageView。将第一个的背景设置为要在屏幕上显示的图像，将第二个的背景设置为其中的彩色。

然后将第二个 ImageView 的可见性设置为不可见。如果此时运行该程序，您应该会看到要显示的图像。然后使用 OnTouch 侦听器并获取您触摸的像素的颜色。颜色将与彩色图像的颜色相对应。

下面的 getColour 方法需要传递触摸事件的 x 和 y 坐标。 R.id.img2 是不可见的图像。

private int getColour( int x, int y)
{
    ImageView img = (ImageView) findViewById(R.id.img2);
    img.setDrawingCacheEnabled(true); 
    Bitmap hotspots=Bitmap.createBitmap(img.getDrawingCache()); 
    img.setDrawingCacheEnabled(false);
    return hotspots.getPixel(x, y);
}

希望这对您有所帮助:)。

【讨论】：

你知道有什么教程实现了这个方法，或者有一些示例代码吗？
不适用于 Config.RGB_565，适用于：Bitmap.Config.ARGB_8888
@scotty 如果图像中有很多热点，您是如何知道触摸了哪个热点的。
有一个很好的tutorial 逐步解释了这一点。我希望它对某人有用。

【解决方案2】：

我使用了 Scotty 表示的面具，但遇到了更多问题。基本上 getPixel 返回的颜色与掩码文件中的颜色略有不同。我所做的是在禁用缩放的情况下将蒙版加载到内存中，并使用如下全色选项：

BitmapFactory.Options bitmapOptions = new BitmapFactory.Options();
bitmapOptions.inTargetDensity = 1;
bitmapOptions.inDensity = 1;
bitmapOptions.inDither = false;
bitmapOptions.inScaled = false;
bitmapOptions.inPreferredConfig = Bitmap.Config.ARGB_8888;
mask = BitmapFactory.decodeResource(appContext.getResources(), resMask, bitmapOptions);

然后我像这样从缩放图像中查找坐标：

ImageView map = (ImageView) findViewById(R.id.image);
Drawable drawable = map.getDrawable();
Rect imageBounds = drawable.getBounds();
int scaledHeight = imageBounds.height();
int scaledWidth = imageBounds.width();
int scaledImageOffsetX = Math.round(event.getX()) - imageBounds.left;
int scaledImageOffsetY = Math.round(event.getY()) - imageBounds.top;

int origX = (scaledImageOffsetX * mask.getWidth() / scaledWidth);
int origY = (scaledImageOffsetY * mask.getHeight() / scaledHeight);

if(origX < 0) origX = 0;
if(origY < 0) origY = 0;
if(origX > mask.getWidth()) origX = mask.getWidth();
if(origY > mask.getHeight()) origY = mask.getHeight();

然后我应用了 mask.getPixel(origX, origY)。它仅在 ImageView 内使用 android:scaleType="fitXY" 缩放图像时才有效，否则坐标关闭。

【讨论】：

【解决方案3】：

我没试过，但是this 看起来很有前途。

我将在我的项目中尝试它，我希望它对你们有用。

这家伙基本上是想通过捏缩放和拖动来模仿机器人中的HTML Tag Map。

【讨论】：

【解决方案4】：

我遵循了 clausundercover 的回答，但在一个区域内像素颜色的一致性仍然存在问题。最终对我有用的是确保我使用带有 indexed 颜色的 PNG 图像作为蒙版。在我的例子中，我使用了 Web 优化调色板（216 色），并确保我选择的任何颜色都是该调色板中的值。进行此更改后，我在整个区域上都获得了相同的颜色值。

【讨论】：