Uso di un'immagine come GoogleMap

Question

Ricevo latitudini e longitudini da json e voglio visualizzarle su una mappa. L'ho fatto usando il modo normale come usando googleMap e Overlay. ma in realtà voglio che sia come l'immagine qui sotto.

Ho cercato e ho trovato alcuni suggerimenti come mostrando mappa in WebView e utilizzando Javascript. ma non trovare tutorial o codice di esempio.

È un'immagine statica e non sarà ingrandita o ridotta. voglio solo mettere le coordinate della posizione sull'immagine.

quindi la mia domanda è, è possibile avere un'immagine come gooleMap?

grazie in anticipo.

Answer 1

Ti suggerisco di ignorare ImageView # onDraw() e tracciare i punti di posizione sopra un'immagine. Il compito principale è tradurre le coordinate dallo spazio geografico allo spazio ImageView. Pertanto, è necessario conoscere i limiti dell'immagine della mappa nello spazio geografico.

Ho fatto uno screenshot di USA in Google Maps. Usando il menu Right click -> What is here? ho trovato i limiti geografici del mio screenshot. Inoltre ho scelto alcuni punti di prova intorno al confine del paese.

Ecco un semplice esempio. ImageView personalizzato:

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; 
    } 
} 

nel layout:

<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" /> 

noti che scaleType="fitXY" è importante, perché le coordinate vengono associati ai limiti ImageView, non l'immagine della mappa.

Nella vostra attività:

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); 

Risultato:

Answer 2

seguire i passi successivi:

Prima duplicare l'immagine che si desidera utilizzare come una mappa immagine e colore ogni sezione. Inutile dire che un colore diverso per ogni sezione: D. Quindi crea due ImageView nel tuo layout. Impostare lo sfondo del primo come l'immagine che si desidera visualizzare sullo schermo e lo sfondo del secondo come il colore in uno.

Quindi impostare la visibilità del secondo ImageView su invisibile. Se esegui il programma a questo punto dovresti vedere l'immagine che vuoi mostrare. Quindi utilizzare un listener OnTouch e ottenere il colore del pixel in cui è stato toccato. Il colore corrisponderà a quello dell'immagine colorata.

Il seguente metodo getColour dovrebbe essere passato le coordinate xey dell'evento di tocco. R.id.img2 è l'immagine invisibile.

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); 
} 

Spero che questo sia stato di aiuto per voi :).

Answer 3

Se sei disposto a spostarti da Google Maps, ti suggerisco di provare a utilizzare jVector Map, una soluzione di mappe basate su JavaScript che utilizza jQuery.

Di seguito è riportato il codice di esempio, che mostra il tasso di disoccupazione negli Stati Uniti:

Il sotto codice sorgente vi aiuterà a ottenere questo output:

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

il codice qui sopra renderà la mappa come di seguito:

LINK TO JVECTORMAP

Answer 4

non è questo solo un problema di scala?

Inserisci un'immagine piatta, quindi traccia i punti esattamente come faresti normalmente ma in scala.

Ie.

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) 

Quindi basta spostare i marcatori.

Spiacente, non è un codice reale, ma non ho idea di quale lingua si desideri. Alla fine della giornata, è un metodo abbastanza semplice.

Answer 5

Un'alternativa ad android google map api è google Static Maps API (https://developers.google.com/maps/documentation/staticmaps/). Basta ottenere un'immagine della mappa con le sue coordinate e puntare le altre coordinate relativamente.