私はjsonから緯度と経度を取得しています。それらを地図上に表示したいと思います。 私は通常の方法でgoogleMapとオーバーレイを使用しています。 しかし、実際には私はそれが下の画像のようにしたい。GoogleMapとしての画像の使用
私が検索し、WebViewの中でマップを示すとJavascriptを使用してのようないくつかのヒントを持っています。 ですが、チュートリアルやサンプルコードは見つかりません。
静止画像であり、ズームインまたはズームアウトされません。ちょうど私は画像上に位置座標を入れたいと思う。
私の質問はgooleMapとしてイメージを持つことが可能ですか？
ありがとうございます。
は、私はあなたがImageViewの＃onDraw（）をオーバーライドし、画像の上に位置点を描画することをお勧め。主な仕事は、ジオスペースからImageViewスペースに座標を変換することです。したがって、地理空間での地図画像の境界を知る必要があります。
私はGoogleマップでUSAのスクリーンショットを作りました。 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" />
注座標がImageViewの境界ではなく、地図画像にマッピングされているのでscaleType="fitXY"は、重要であること。あなたの活動で
：
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);
結果：あなたが使用しないマップのAPIバージョン
お返事ありがとうございます。 – NaserShaikh
それは働いた！しかし、正確な場所でピンを取得しないでください、私はマップ上の正確な場所にピンを得るために何をする必要があります。 – NaserShaikh
境界を定義することがすべてです。私は別のズームレベルを試し、より正確なバウンド値を選んだ（私は基準点として道路番号アイコンを使用した - 左上と右下のコーナー）。赤い点はステーションを表します。スクリーンショットhttp://i.stack.imgur.com/fTv3y.png – vokilam
次の手順に従い：
まずあなたがイメージマップと色として各セクションを使用したい画像を複製。言うまでもなく、セクションごとに異なる色：D。次に、レイアウトに2つのImageViewを作成します。最初のものの背景を表示する画像として設定し、2番目の背景を1つの色として設定します。
次に、2番目の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);
}
これはあなたにとって助けになったと思います:)。
Googleマップの外に移動したい場合は、jVector Mapを使用することをお勧めします。これは、jQueryを使用した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]);
}
});
});
});
上記のコードは以下のようにマップをレンダリングします以下
は、米国では失業率を示したコードサンプルは、次のとおりです。
答えてくれてありがとう私は間違いなくそれを調べます。 – NaserShaikh
これはただのスケーリング問題ではないですか？
平らな画像を入れて、通常のように正確に点をプロットします。
e。
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)
次に、マーカーをplonkします。
申し訳ありませんが、それは本当のコードではありませんが、私はあなたが一日の。最後に、それを何をしたい言語見当がつかない、それはかなり単純な方法です。
GoogleマップAPIをAndroidに代替では、GoogleスタティックマップAPI（https://developers.google.com/maps/documentation/staticmaps/）です。 UR座標で地図画像を取得し、他の座標を相対的に指示します。
？または、webview/jsソリューションに固定されていますか？ –
私は2.2以降を使用しています。私はdefau1tとVokilaMのようなソリューションを私は間違いなく最初に試してみます。 – NaserShaikh