1. 程式人生 > >百度地圖之新增覆蓋物

百度地圖之新增覆蓋物

前面我們關於百度地圖的SDK的部落格已經寫了不少了,不過為了把地圖這個功能做的更完善一些,同時也為了提高自己的技術,我們還是可以在目前所具有的功能之上再新增一些功能。

今天這篇部落格,我就講講如何在地圖上新增覆蓋物。

一,和實現顯示導航的圖示一樣,我們需要例項化一個BitmapDescriptor例項,然後呼叫BitmapDescriptorFactory的fromSource()方法,傳入資原始檔,這樣的話,我們就可以在地圖上出現覆蓋物圖示的第一步。
二,在Toolbar標題欄上面新增一個item選項,然後在 public boolean onOptionsItemSelected(MenuItem item){
}裡面新增點選item之後的邏輯事件。不過在這之前,我們要準備好另外一個類,這個類裡面放上我們覆蓋物需要的一些引數。
//新增覆蓋物圖片
比如我新建了一個info類,然後在這個類裡面來設定一些覆蓋物的引數。

public class info implements Serializable{
    //private static final long serialVersionUID = -1010711775392052966L;
    private double latitude;
    private double longitude;
    private int zan;
    private String name;
    private int imgId;
    private String distance;
    public static List<info> infos = new
ArrayList<info>(); static { infos.add(new info(34.242652, 108.971171, R.drawable.a01, "英倫貴族小旅館", "距離209米", 1456)); infos.add(new info(34.242952, 108.972171, R.drawable.a02, "沙井國際洗浴會所", "距離897米", 456)); infos.add(new info(34.242852, 108.973171
, R.drawable.a03, "五環服裝城", "距離249米", 1456)); infos.add(new info(34.242152, 108.971971, R.drawable.a04, "老米家泡饃小炒", "距離679米", 1456)); } public info(double latitude, double longitude, int imgId, String name, String distance, int zan) { this.latitude = latitude; this.longitude = longitude; this.imgId = imgId; this.name = name; this.distance = distance; this.zan = zan; } public double getLatitude() { return latitude; } public void setLatitude(double latitude) { this.latitude = latitude; } public double getLongitude() { return longitude; } public void setLongitude(double longitude) { this.longitude = longitude; } public int getImgId() { return imgId; } public void setImgId(int imgId) { this.imgId = imgId; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getDistance() { return distance; } public void setDistance(String distance) { this.distance = distance; } public int getZan() { return zan; } public void setZan(int zan) { this.zan = zan; } }

三,準備好info類以後,我們就開始寫點選item後的邏輯事件。

 case R.id.id_add:
                addOverlays(info.infos);
                break;
 private void addOverlays(List<info> infos)
    {
        baiduMap.clear();
        LatLng latLng = null;
        Marker marker = null;
        OverlayOptions options;
        for (info info : infos)
        {
            latLng = new LatLng(info.getLatitude(), info.getLongitude());// 經緯度

            options = new MarkerOptions()
                    .position(latLng)
                    .icon(mMarker)// 圖示
                    .zIndex(5);
            marker = (Marker) baiduMap.addOverlay(options);
            Bundle arg0 = new Bundle();
            arg0.putSerializable("info", info);
            marker.setExtraInfo(arg0);
        }
        MapStatusUpdate msu = MapStatusUpdateFactory.newLatLng(latLng);
        baiduMap.setMapStatus(msu);
    }

這樣的話,我們就把點選item,就可以顯示出marker。
四,準備佈局檔案

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="220dp"
    android:background="#cc4e5a6b" >

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="150dp"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="12dp"
        android:layout_marginRight="12dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/img_border"
        android:scaleType="fitXY"
        android:src="@drawable/a01" >
    </ImageView>

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:background="@drawable/bg_map_bottom" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="20dp"
            android:orientation="vertical" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="老米家泡饃"
                android:textColor="#fff5eb" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="距離200米"
                android:textColor="#fff5eb" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="20dp"
            android:orientation="horizontal" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/map_zan"
                android:clickable="true" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="789"
                android:layout_gravity="center"
                android:textColor="#fff5eb" />
        </LinearLayout>
    </RelativeLayout>

</RelativeLayout>

然後我們貼一張效果圖
這裡寫圖片描述

五,點選marker的邏輯事件

//設定marker的點選事件
        baiduMap.setOnMarkerClickListener(new OnMarkerClickListener()
        {
            @Override
            public boolean onMarkerClick(Marker marker)
            {
                Bundle extraInfo = marker.getExtraInfo();
                info info = (info) extraInfo.getSerializable("info");
                ImageView iv = (ImageView) mMarkerLy
                        .findViewById(R.id.id_info_img);
                TextView distance = (TextView) mMarkerLy
                        .findViewById(R.id.id_info_distance);
                TextView name = (TextView) mMarkerLy
                        .findViewById(R.id.id_info_name);
                TextView zan = (TextView) mMarkerLy
                        .findViewById(R.id.id_info_zan);
                iv.setImageResource(info.getImgId());
                distance.setText(info.getDistance());
                name.setText(info.getName());
                zan.setText(info.getZan() + "");//把讚的型別由int 變成String
                 mMarkerLy.setVisibility(View.VISIBLE);
                return true;
            }
        });

不過,我們同樣也要設定點選地圖其他位置時候,讓marker消失。

baiduMap.setOnMapClickListener(new OnMapClickListener()
        {

            @Override
            public boolean onMapPoiClick(MapPoi arg0)
            {
                return false;
            }

            @Override
            public void onMapClick(LatLng arg0)
            {
                mMarkerLy.setVisibility(View.GONE);
            }
        });

六,我們還希望在點選marker的時候,還希望在marker上面新增一行文字說明。
這時候我們需要例項化一個infowindow物件,然後給infowindow例項新增一些引數。

InfoWindow infoWindow;
                TextView tv = new TextView(context);
                tv.setBackgroundResource(R.drawable.location_tips);
                tv.setPadding(30, 20, 30, 50);
                tv.setText(info.getName());
                tv.setTextColor(Color.parseColor("#ffffff"));
                BitmapDescriptor tips = BitmapDescriptorFactory.fromView(tv);
                final LatLng latLng = marker.getPosition();
                Point p = baiduMap.getProjection().toScreenLocation(latLng);
                p.y -= 47;
                LatLng ll = baiduMap.getProjection().fromScreenLocation(p);
                infoWindow = new InfoWindow(tips, ll,p.y,
                        new OnInfoWindowClickListener()
                        {
                            @Override
                            public void onInfoWindowClick()
                            {
                                baiduMap.hideInfoWindow();
                            }
                        });
                baiduMap.showInfoWindow(infoWindow);

,這樣的話,我們離大功告成就只有一步之遙了。我們需要在 baiduMap.setOnMapClickListener(new OnMapClickListener(){
}方法裡面新增一句baiduMap.hideInfoWindow();用來隱藏infowindow.

相關推薦

地圖新增覆蓋物

前面我們關於百度地圖的SDK的部落格已經寫了不少了,不過為了把地圖這個功能做的更完善一些,同時也為了提高自己的技術,我們還是可以在目前所具有的功能之上再新增一些功能。 今天這篇部落格,我就講講如何在地圖上新增覆蓋物。 一,和實現顯示導航的圖示一樣,我們需要例

地圖開發 新增覆蓋物 + 地理編碼和反地理編碼

    之前寫過一篇關於百度地圖開發的blog,主要介紹了百度地圖的基本地圖的顯示。     下面來看一下地圖上覆蓋物的新增,以及地理編碼和反地理編碼。 新增覆蓋物     在地圖上新增覆蓋物,一般需要以下幾個步驟:     1. 定義

地圖開發新增覆蓋物的資訊時出現的問題new infoWindow的時候

新的百度地圖SDK的此構造方法為四個引數的解決方法 public InfoWindow(BitmapDescriptor bd,         LatLng position,     int yOffset,          InfoWindow.OnInfoWi

地圖自定義覆蓋物手機端新增點選事件無效

最近在做百度地圖新增自定義覆蓋物時,遇到一個問題。起先參照api都很順利,但是當我在給自定義的覆蓋物新增點選事件時,問題來了:無法觸發。 去網上找了一些解決方案,包括註冊點選事件之類的,都沒有解決。 之後無意發現,當把除錯模式切出手機模式時,點選事件就能夠正

地圖覆蓋物

今天熟悉了一下百度地圖有關覆蓋物的知識,首先,大家來看一下做出來的效果: 我們來看程式碼 一、佈局檔案 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:androi

地圖自動提示--autoComplete

esp lan length aid time 下拉 html style log <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

地圖九如何在一個地圖上顯示多條導航路線

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

地圖在一個地圖上顯示多條導航路線

                package com.njupt.bmap_helloworld;import com.baidu.mapapi.BMapManager;import com.baidu.mapapi.GeoPoint;import com.baidu.mapapi.MKAddrInfo;i

地圖,marker新增右鍵選單

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>

地圖定位功能,註冊祕鑰

1.1     百度地圖定位GPS  + WIFI  +  基站1.     GPS定位:是美國軍方提供全球定位系統。5~15米        北斗:中國研發定位系統。目前最先進的定位系統,精度能達到幾釐米        格洛納斯:俄羅斯定位系統,已交於北斗維護。     

地圖api--加覆蓋物

/*  * 載入區域統計  */ function loadAreaStatistics(fun) {     //  var crowdId = null, crowdIdTo = null;     TD.Util.ajax({         url: '/are

地圖自定義覆蓋物載入時跑偏

直接看圖:正常是這樣的 我點選平面圖後,再點選百度地圖,先把地圖clearOverlays,再非同步請求介面重新載入了覆蓋物,則變成了下圖:   覆蓋物跑到右下角了,滑鼠在地圖上隨意拖拽一下,覆蓋物就正常顯示定位了。  解決辦法: reloadScene

地圖鷹眼軌跡

1.1     鷹眼軌跡百度鷹眼是一套集軌跡追蹤、儲存、運算、查詢的完整軌跡開放服務,可幫助開發者管理多達100萬人/車軌跡。使用百度鷹眼,您可以輕鬆開發出適用於車隊監控、車聯網、專車計費、外業人員監管

地圖標註物聚合

//cluster聚合器類 package com.zhl.map; import java.util.ArrayList; import java.util.List; import android.graphics.Bitmap; import android.graphics.Point; impo

地圖開發-新增圖文的標註功能

專案背景:最近有一個需求,是要在百度地圖上新增類似的網頁版的地圖標註功能,主要是能給使用者臨時的在地圖上標註一個地方 網頁版的效果 可以看見這個功能的要求是左邊一個棒棒糖,右邊有對應的文字說明 客戶端的效果 相關類的使用

android實現地圖點選覆蓋物(MyLocationOverlay)彈出自定義彈出視窗

一:增加覆蓋物MyLocationOverlay          MyLocationOverlay在普通的Overlay基礎上進行了封裝,可以更好的進行一個定位處理,例如方向。        要想點選MyLocationOverlay觸發一個事件,就需要繼承MyLoc

OpenLayers筆記--載入地圖新增比例尺

<!DOCTYPE html><html><head><metahttp-equiv="Content-Type"content="text/html; cha

地圖自定義覆蓋物及建立多個小圖示

// 百度地圖API功能var sContent ="<h4 style='margin:0 0 5px 0;padding:0.2em 0'>天安門</h4>" +"<img style='float:right;margin:4px' id

地圖jsonp獲取位置座標

var lng,lat; var address = "靜安寺"; var url = "http://api.map.baidu.com/geocoder/v2/?address="+address+

地圖去掉marker覆蓋物或者去掉maker的label文字

var marker = new BMap.Marker(...); //方法1 map.removeOverlay(marker); //方法2 marker.remove(); //如果是Mar