Question

我从json得到了经度和经度，我想在地图上显示它们。我使用googleMap和Overlays等正常方式完成了它。但实际上我希望它像下面的图像。

enter image description here

我已经搜索并得到一些提示，比如在webView中显示地图并使用Javascript。但是没有找到任何教程或示例代码。

它是静态图像，不会放大或缩小。我想把位置坐标放在图像上。

所以我的问题是，是否可以将图像作为gooleMap？

提前感谢。

enter image description here

Answer 1

如果您愿意转移到Google地图之外，我建议您尝试使用jQuery尝试jVector Map，这是一个基于JavaScript的地图解决方案。

以下是代码示例，其中显示了美国的失业率：

以下源代码将帮助您获得此输出：

$(function(){
  $.getJSON('/data/us-unemployment.json', function(data){
    var val = 2009;
        statesValues = jvm.values.apply({}, jvm.values(data.states)),
        metroPopValues = Array.prototype.concat.apply([], jvm.values(data.metro.population)),
        metroUnemplValues = Array.prototype.concat.apply([], jvm.values(data.metro.unemployment));

    $('#world-map-gdp').vectorMap({
      map: 'us_aea_en',
      markers: data.metro.coords,
      series: {
        markers: [{
          attribute: 'fill',
          scale: ['#FEE5D9', '#A50F15'],
          values: data.metro.unemployment[val],
          min: jvm.min(metroUnemplValues),
          max: jvm.max(metroUnemplValues)
        },{
          attribute: 'r',
          scale: [5, 20],
          values: data.metro.population[val],
          min: jvm.min(metroPopValues),
          max: jvm.max(metroPopValues)
        }],
        regions: [{
          scale: ['#DEEBF7', '#08519C'],
          attribute: 'fill',
          values: data.states[val],
          min: jvm.min(statesValues),
          max: jvm.max(statesValues)
        }]
      },
      onMarkerLabelShow: function(event, label, index){
        label.html(
          ''+data.metro.names[index]+''+
          'Population: '+data.metro.population[val][index]+''+
          'Unemployment rate: '+data.metro.unemployment[val][index]+'%'
        );
      },
      onRegionLabelShow: function(event, label, code){
        label.html(
          ''+label.html()+''+
          'Unemployment rate: '+data.states[val][code]+'%'
        );
      }
    });

    var mapObject = $('#world-map-gdp').vectorMap('get', 'mapObject');

    $("#slider").slider({
      value: val,
      min: 2005,
      max: 2009,
      step: 1,
      slide: function( event, ui ) {
        val = ui.value;
        mapObject.series.regions[0].setValues(data.states[ui.value]);
        mapObject.series.markers[0].setValues(data.metro.unemployment[ui.value]);
        mapObject.series.markers[1].setValues(data.metro.population[ui.value]);
      }
    });
  });
});

以上代码将呈现如下地图：

USA unemployment LINK TO JVECTORMAP

Answer 2

我建议你覆盖ImageView＃onDraw（）并在图像上绘制位置点。主要任务是将坐标从地理空间转换为ImageView空间。因此，您需要知道地理空间中地图图像的边界。

我在Google地图上制作了美国的截图。使用Right click -> What is here?菜单，我找到了截图的地理边界。我还在国界附近挑选了一些测试点。

这是一个简单的例子。自定义ImageView：

public class MapImageView extends ImageView {
    private float latitudeTop, latitudeBottom, longitudeRight, longitudeLeft;
    private List<Float> points = new ArrayList<Float>();
    private Paint pointPaint;
    private Matrix pointMatrix = new Matrix();

    public MapImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        pointPaint = new Paint();
        pointPaint.setAntiAlias(true);
        pointPaint.setStrokeCap(Cap.ROUND);
        pointPaint.setColor(Color.RED);
        pointPaint.setStrokeWidth(8.0f);
    }

    public void setBounds(float latitudeTop, float latitudeBottom, float longitudeLeft, float longitudeRight) {
        this.latitudeTop = latitudeTop;
        this.latitudeBottom = latitudeBottom;
        this.longitudeLeft = longitudeLeft;
        this.longitudeRight = longitudeRight;
    }

    public void addPoint(float latitude, float longitude) {
        points.add(longitude);
        points.add(latitude);
        invalidate();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        pointMatrix.reset();
        pointMatrix.postTranslate(-longitudeLeft, -latitudeTop);
        pointMatrix.postScale(
                getMeasuredWidth()/(longitudeRight-longitudeLeft), 
                getMeasuredHeight()/(latitudeBottom-latitudeTop));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.drawPoints(mapPoints(), pointPaint);
    }

    private float[] mapPoints() {
        float[] pts = new float[points.size()];

        for (int i = 0; i < points.size(); i++) {
            pts[i] = points.get(i);
        }

        pointMatrix.mapPoints(pts);

        return pts;
    }
}

在你的布局中：

<com.example.stackoverflow.MapImageView
    android:id="@+id/img_map"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/map"
    android:scaleType="fitXY" />

请注意scaleType="fitXY"很重要，因为坐标会映射到ImageView边界，而不是地图图片。

在您的活动中：

MapImageView mapView = (MapImageView)findViewById(R.id.img_map);
mapView.setBounds(52.734778f, 19.979026f, -130.78125f, -62.402344f);

mapView.addPoint(42.163403f,-70.839844f);
mapView.addPoint(42.163403f,-70.839844f);

结果：

enter image description here

Answer 3

这不仅仅是一个扩展问题吗？

将平面图像放入，然后完全按照正常情况绘制点，但缩放。

即

h_scale=(real_america_width/image_america_width)
v_scale=(real_america_height/image_america_height)
lat = lat_from_json*h_scale)
lon = lon_from_json*v_scale)

然后只是标记标记。

对不起，这不是真正的代码，但我不知道你想要什么语言。结束一天，这是一个相当简单的方法。

Answer 4

按照以下步骤操作：

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

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

以下getColour方法需要传递touch事件的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);
}

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

Answer 5

Android谷歌地图api的另一种选择是谷歌静态地图API（https://developers.google.com/maps/documentation/staticmaps/）。只需获取具有ur坐标的地图图像并相对指向其他坐标。

使用图像作为谷歌地图

5 个答案: