android - GoogleMap としての画像の使用

Question

json から緯度と経度を取得しており、それらを地図上に表示したいと考えています。googleMap や Overlays を使用するなど、通常の方法でそれを行いました。しかし、実際には下の画像のようになりたいです。

ここに画像の説明を入力

検索して、webView でマップを表示したり、Javascript を使用したりするなどのヒントを得ました。チュートリアルやサンプルコードは見つかりません。

静止画像であり、ズームインまたはズームアウトしません。画像に位置座標を入れたいだけです。

私の質問は、画像を gooleMap として持つことは可能ですか?

前もって感謝します。

ここに画像の説明を入力

score 3 · Accepted Answer

Google マップの外への移行を希望する場合は、jQuery を使用した JavaScript ベースのマップソリューションである jVector Map を試してみることをお勧めします。

以下は、米国の失業率を示すコードサンプルです。

以下のソースコードは、この出力を取得するのに役立ちます。

$(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]);
      }
    });
  });
});

上記のコードは、以下のようにマップをレンダリングします。

米国の失業 JVECTORMAPへのリンク

score 1 · Accepted Answer

これは単なるスケーリングの問題ではありませんか？

平面画像を入れて、通常とまったく同じようにポイントをプロットしますが、スケーリングします。

すなわち。

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)

次に、マーカーをポンポンと叩きます。

申し訳ありませんが、それは実際のコードではありませんが、どの言語でそれを使用したいのかわかりません。結局のところ、これはかなり単純な方法です。

score 0 · Accepted Answer

android google map apiの代わりに、google Static Maps API（https://developers.google.com/maps/documentation/staticmaps/）があります。ur座標を含むマップ画像を取得し、他の座標を相対的にポイントするだけです。

score 0 · Accepted Answer

次の手順に従います。

まず、イメージマップとして使用するイメージを複製し、各セクションに色を付けます。言うまでもなく、セクションごとに異なる色 :D. 次に、レイアウトに 2 つの ImageView を作成します。最初の背景を画面に表示する画像として設定し、2 番目の背景を色付きの画像として設定します。

次に、2 番目の 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);
}

これがあなたの助けになることを願っています:)。

android - GoogleMap としての画像の使用

5 に答える 5

Related

Reference