Sử dụng Hình ảnh làm GoogleMap

Question

Tôi đang nhận được vĩ độ và kinh độ từ json và tôi muốn hiển thị chúng trên bản đồ. Tôi đã thực hiện nó theo cách thông thường như bằng cách sử dụng googleMap và Lớp phủ. nhưng thực sự tôi muốn nó giống như hình dưới đây.

tôi đã tìm kiếm và có một số gợi ý như hiển thị bản đồ trong WebView và sử dụng Javascript. nhưng không tìm thấy bất kỳ hướng dẫn hoặc mã mẫu nào.

Hình ảnh tĩnh của nó và sẽ không phóng to hoặc thu nhỏ. tôi chỉ muốn đặt tọa độ vị trí trên hình ảnh.

vì vậy câu hỏi của tôi là, có thể có hình ảnh dưới dạng gooleMap không?

cảm ơn trước.

Answer 1

Tôi đề nghị bạn ghi đè ImageView # onDraw() và vẽ các điểm vị trí trên đầu hình ảnh. Nhiệm vụ chính là dịch tọa độ từ không gian địa lý sang không gian ImageView. Vì vậy, bạn cần phải biết giới hạn của hình ảnh bản đồ của bạn trong không gian địa lý.

Tôi đã chụp ảnh màn hình của Hoa Kỳ trong Google Maps. Sử dụng menu Right click -> What is here? Tôi tìm thấy giới hạn địa lý của ảnh chụp màn hình của tôi. Ngoài ra tôi đã chọn một số điểm kiểm tra xung quanh biên giới quốc gia.

Dưới đây là một ví dụ đơn giản. Tuỳ chỉnh 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; 
    } 
} 

Trong bố cục của bạn:

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

Lưu ý rằng scaleType="fitXY" là rất quan trọng, bởi vì tọa độ được ánh xạ tới giới hạn ImageView, không phải là hình ảnh bản đồ.

Trong hoạt động của bạn:

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

Kết quả:

Answer 2

Thực hiện theo các bước sau:

Đầu tiên lặp lại trong các hình ảnh mà bạn muốn sử dụng như một bản đồ hình ảnh và màu sắc từng bộ phận. Không cần phải nói, một màu khác nhau cho mỗi phần: D. Sau đó, tạo hai ImageView trong bố cục của bạn. Đặt nền của hình ảnh đầu tiên làm hình ảnh mà bạn muốn hiển thị trên màn hình và nền của hình ảnh thứ hai dưới dạng màu được tô màu.

Sau đó đặt chế độ hiển thị của ImageView thứ hai thành ẩn. Nếu bạn chạy chương trình tại thời điểm này, bạn sẽ thấy hình ảnh mà bạn muốn hiển thị. Sau đó, sử dụng một người nghe OnTouch và nhận được màu của điểm ảnh mà bạn chạm vào. Màu sẽ tương ứng với màu của hình ảnh màu.

Phương thức getColour sau sẽ cần được chuyển qua tọa độ x và y của sự kiện chạm. R.id.img2 là hình ảnh vô hình.

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

Hy vọng đây là một số trợ giúp cho bạn :).

Answer 3

Nếu bạn sẵn sàng di chuyển ra khỏi Google Maps, tôi khuyên bạn nên dùng thử Bản đồ jVector, một giải pháp bản đồ dựa trên JavaScript bằng jQuery.

Dưới đây là các mẫu mã, cho thấy tỷ lệ thất nghiệp tại Mỹ:

dưới đây Source Code sẽ giúp bạn có được kết quả này:

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

Đoạn mã trên sẽ làm cho bản đồ như dưới đây:

LINK TO JVECTORMAP

Answer 4

không đây có phải là chỉ là một vấn đề rộng?

Đặt hình ảnh phẳng vào và sau đó vẽ các điểm chính xác như bình thường nhưng được chia tỷ lệ.

Tức là.

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) 

Sau đó chỉ cần đánh dấu các điểm đánh dấu.

Xin lỗi, đó không phải là mã thực nhưng tôi không biết bạn muốn ngôn ngữ nào vào cuối ngày. Đây là một phương pháp khá đơn giản.

Answer 5

Một thay thế cho api bản đồ google android là google Static Maps API (https://developers.google.com/maps/documentation/staticmaps/). Chỉ cần có được một hình ảnh bản đồ với tọa độ ur và điểm tọa độ tương đối khác.