使用谷歌地圖的圖像

我從json獲取緯度和經度，我想在地圖上顯示它們。我已經使用正常的方式，如使用谷歌地圖和覆蓋。但實際上我希望它像下面的圖像。使用谷歌地圖的圖像

enter image description here

我已經搜索並得到了一些暗示像顯示webView的地圖和使用Javascript。但沒有找到任何教程或示例代碼。

它是一個靜態圖像，不會放大或縮小。只是我想在圖像上放置位置座標。

所以我的問題是，是否有可能將圖像作爲gooleMap？

在此先感謝。

enter image description here

來源

2013-02-14 NaserShaikh

哪個地圖API版本您使用？或者你是否修復了webview/js解決方案？ – 2013-02-28 10:23:55

我使用2.2及以上..我喜歡defau1t和VokilaM解決方案，我將definetly首先嚐試。 – NaserShaikh 2013-02-28 10:43:34

我建議你重寫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

來源

2013-02-28 08:53:22 vokilam

非常感謝您的回答，我會盡力回覆您。 – NaserShaikh 2013-02-28 10:33:36

它的工作！但不要在確切的位置得到針腳，他們與位置近似，我需要做的是在地圖上的確切位置獲得針腳。 – NaserShaikh 2013-02-28 12:51:07

這完全是關於界定界限。我嘗試了另一個縮放級別，並更精確地選擇了界限值（我使用道路編號圖標作爲參考點 - 左上角和右下角）。紅點代表電臺。見截圖http://i.stack.imgur.com/fTv3y.png – vokilam 2013-02-28 13:09:20

按照下面的步驟：

首先複製要用作圖像映射使用和顏色的每個部分的圖像。不用說，每個部分的顏色不同：D。然後在您的佈局中創建兩個ImageView。將第一個的背景設置爲想要顯示的圖像以及第二個的背景作爲彩色的背景。

然後將第二個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); 
}

希望這對你有一些幫助:)。

來源

2013-02-14 08:18:40 jlopez

如果你願意移出Google Maps，我建議你試試jVector Map，一個基於JavaScript的使用jQuery的地圖解決方案。

下面是代碼示例，顯示美國的失業率：

下面的源代碼將有助於你得到這樣的輸出：

$(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

來源

2013-02-27 14:11:51 defau1t

感謝您的回答我一定會研究它。 – NaserShaikh 2013-02-28 10:19:46

這是不是隻是一個規模問題？

放入一個平面圖像，然後繪製完全按照您通常的比例縮放的點。

即，

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)

然後只是標記標記。

對不起，它不是真正的代碼，但我不知道你想要什麼語言。一天結束，這是一個相當簡單的方法。

來源

2013-02-28 05:26:03 Rafe

Android谷歌地圖API的替代方法是谷歌靜態地圖API（https://developers.google.com/maps/documentation/staticmaps/）。只需獲得一個帶有你的座標的地圖圖像並相對地指出其他座標。

來源

2013-02-28 07:53:14 WSS

使用谷歌地圖的圖像

回答

相關問題