天天看點

【如何在Google Map上顯示地标】

<a target="_blank" href="http://blog.51cto.com/attachment/201208/155654448.png"></a>

    其實Google Map中的地标(或者說圖示更貼切)就是位于地圖圖層上的一個新圖層,我們隻需要簡單的将自己的圖示(或者是圖示集合)添加到Google Map内置的圖示圖層裡去即可。

    以上文中的HelloGoogleMap為例

activity_main.xml

&lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 

    xmlns:tools="http://schemas.android.com/tools" 

    android:layout_width="fill_parent" 

    android:layout_height="fill_parent" &gt; 

    &lt;com.google.android.maps.MapView 

        android:id="@+id/mapview" 

        android:layout_width="fill_parent" 

        android:layout_height="fill_parent" 

        android:apiKey="你所獲得的API KEY" 

        android:clickable="true" /&gt; 

&lt;/RelativeLayout&gt; 

package com.billhoo.study.hellogooglemaps; 

import java.util.List; 

import android.graphics.drawable.Drawable; 

import android.os.Bundle; 

import com.google.android.maps.GeoPoint; 

import com.google.android.maps.MapActivity; 

import com.google.android.maps.MapView; 

import com.google.android.maps.Overlay; 

import com.google.android.maps.OverlayItem; 

public class MainActivity extends MapActivity { 

    MapView mMapView = null;  //Google Map 對象 

    @Override 

    public void onCreate(Bundle savedInstanceState) { 

        super.onCreate(savedInstanceState); 

        setContentView(R.layout.activity_main); 

        mMapView = (MapView) findViewById(R.id.mapview); 

        mMapView.setBuiltInZoomControls(true); // 使用內置放大縮小控制按鈕 

    protected boolean isRouteDisplayed() { 

        return false; 

    } 

    上述代碼能夠在MainActivity中顯示GoogleMap,接下來我們将編寫自定義的圖示類HelloItemizedOverlay,本類維護一個圖示集合,并在需要時由使用者将本類對象添加進GoogleMap内置的圖示集合中去,進而實作地圖上圖示的顯示以及其他相關操作。代碼如下:

import java.util.ArrayList; 

import android.app.AlertDialog; 

import android.content.Context; 

import com.google.android.maps.ItemizedOverlay; 

@SuppressWarnings("rawtypes") 

public class HelloItemizedOverlay extends ItemizedOverlay { 

    private ArrayList&lt;OverlayItem&gt; mOverlayItems = new ArrayList&lt;OverlayItem&gt;(); // 由本類維護的自定義圖示集合和 

    private Context mContext = null; 

    public HelloItemizedOverlay(Drawable defaultMarker) { 

        super(boundCenter(defaultMarker)); // 使用預設圖示初始化父類 

    public HelloItemizedOverlay(Drawable defaultMarker, Context context) { 

        super(boundCenter(defaultMarker)); 

        mContext = context; 

    protected OverlayItem createItem(int i) { 

        return mOverlayItems.get(i); 

    public int size() { 

        return mOverlayItems.size(); 

    /** 

     * 當圖示被點選時 

     */ 

    protected boolean onTap(int index) { 

        OverlayItem item = mOverlayItems.get(index); 

        AlertDialog.Builder dialog = new AlertDialog.Builder(mContext); 

        dialog.setTitle(item.getTitle()); 

        dialog.setMessage(item.getSnippet()); 

        dialog.show(); 

        return true; 

     * 在本類維護的圖示集合中添加一個新的圖示 

     *  

     * @param overlay 

    public void addOverlay(OverlayItem overlay) { 

        mOverlayItems.add(overlay); 

        populate(); 

    上述代碼算是一個固定結構,期間重載了父類ItemizedOverlay的createItem(int i)、size()以及onTap(int index)方法,并且新增了一個用于添加新圖示的addOverlay(OverlayItem overlay)方法(今後可以根據自己的需要增加諸如clear()、remove()等常用方法)。

    接下來需要做的事情便是利用上述工具類進行圖示的添加了,修改後的MainActivity如下:

    private MapView mMapView = null; // Google Map 對象 

        List&lt;Overlay&gt; mapOverlays = mMapView.getOverlays(); // 擷取GoogleMap内置的圖示集合 

        Drawable drawable = this.getResources().getDrawable( 

                R.drawable.cur_location); 

        HelloItemizedOverlay itemizedOverlays = new HelloItemizedOverlay( 

                drawable, this); // 使用cur_location這個圖示初始化我們的工具類HelloItemizedOverlay 

        GeoPoint point1 = new GeoPoint((int) (35.422006 * 1E6), 

                (int) (104.084095 * 1E6)); // 建構一個GeoPoint位置對象,經度35.422006,緯度104.084095 

        OverlayItem overlayItem1 = new OverlayItem(point1, "我的第一個地标", "随便找個點"); // 建構我們的第一個自定義圖示,位于point1處 

        GeoPoint point2 = new GeoPoint((int) (35.4 * 1E6), (int) (139.46 * 1E6)); // 同上 

        OverlayItem overlayItem2 = new OverlayItem(point2, "這是第二個圖示", "随便找的地點"); // 同上 

        itemizedOverlays.addOverlay(overlayItem1); // 将我們的第一個圖示添加進自定義圖示集合 

        itemizedOverlays.addOverlay(overlayItem2); // 将我們的第二個圖示添加進該集合 

        mapOverlays.add(itemizedOverlays); // 将我們的自定義圖示集itemizedOverlays添加到GoogleMap内置的圖示集合中去 

    到此為止,在GoogleMap上顯示自定義圖示的基礎部分已經全部完工,運作模拟器看看效果吧。

<a target="_blank" href="http://blog.51cto.com/attachment/201208/163001801.png"></a>

    依次點選第一個以及第二個氣泡,便會彈出我們之前設定好的提示資訊

<a target="_blank" href="http://blog.51cto.com/attachment/201208/164936507.png"></a>

<a target="_blank" href="http://blog.51cto.com/attachment/201208/163001169.png"></a>

    細心的朋友會發現,氣泡的陰影部分怎麼沒有正确顯示?别忙,請在代碼段中加入如下處理 

... 

        // 使圖示陰影正确顯示 

        Drawable marker = this.getResources().getDrawable( 

        int w = marker.getIntrinsicWidth(); 

        int h = marker.getIntrinsicHeight(); 

        marker.setBounds(-w / 2, -h, w / 2, 0); 

        overlayItem1.setMarker(marker); // 将overlayItem1的圖示重新設定成marker 

        // overlayItem2.setMarker(marker); //為了示範差別,第二個點不重新設定 

    再次運作,發現第一個點的陰影已經正确顯示了。

<a target="_blank" href="http://blog.51cto.com/attachment/201208/164328727.png"></a>

    到此,bill已經将圖示的添加介紹完畢,其中還包括了自己遇到的陰影錯位問題的修正方法。但是,Android Google Map的陷阱還有很多,這也是bill這段時間以來一直在折騰的原因。接下來的文章,bill将一一向大家分享這些陷阱的解決方案,希望能夠幫到那些像bill之前那樣,對其中各種莫名其妙的異常或錯誤百思不得其解的朋友。

     本文轉自Bill_Hoo 51CTO部落格,原文連結:http://blog.51cto.com/billhoo/970811,如需轉載請自行聯系原作者

繼續閱讀