百度地圖:加強篇(覆蓋物的實現)
覆蓋物
如標註、向量圖形元素(包括:折線和多邊形和圓)、定點陣圖標等。覆蓋物擁有自己的地理座標,當您拖動或縮放地圖時,它們會相應的處理。
覆蓋物包括:
- 覆蓋物的抽象基類:Overlay(核心類)
- 文字繪製覆蓋物:TextOverlay
- 分條目覆蓋物:ItemizedOverlay
- 路線規劃覆蓋物:RouteOverlay
- 換乘路線覆蓋物:TransitOverlay
我的位置覆蓋物:MyLocationOverlay
1、實現目的:在底圖上畫一個圓形的幾何圖形(覆蓋物)
實現過程:1、建一個基類實現基本的底圖效果,再建一個類實現覆蓋物,當前類繼承基類;2、然後通過
//①獲取mapView存放覆蓋物的集合
List overlays = mapView.getOverlays();
// ②建立自己的overlays資訊並新增集合中
GraphicsOverlay overlay = new GraphicsOverlay(mapView);
// 設定幾何圖形
setData(overlay);
overlays.add(overlay);
// ③重新整理mapView的顯示內容
mapView.refresh();
3、設定幾何圖形:通過新建一個圖形Graphic(geometry, symbol),裝幾何元素+樣式引數,然後將該圖形新增到圖形的overlay裡面。overlay.setData(graphic);再設定幾何元素和樣式引數。
4、再設定Manifest.xml的內容即可。
實現效果:
GraphicsOverlayDemo.java
package huaxa.it.map;
import java.util.List;
import com.baidu.mapapi.map.Geometry;
import com.baidu.mapapi.map.Graphic;
import com.baidu.mapapi.map.GraphicsOverlay;
import com.baidu.mapapi.map.Overlay;
import com.baidu.mapapi.map.Symbol;
import android.R.color;
import android.R.drawable;
import android.os.Bundle;
/**
* @專案名: BaiduMap
* @包名: huaxa.it.map
* @類名: GraphicsOverlayDemo
* @建立者: 黃夏蓮
* @建立時間: 2016年12月1日 ,下午6:13:46
*
* @描述: TODO
*/
public class GraphicsOverlayDemo extends BaseActivity
{
@Override
protected void onCreate(Bundle savedInstanceState)
{
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
draw();
}
/**
* 繪製幾何圖形
*/
private void draw()
{
// 覆蓋物操作
// ①獲取存放覆蓋物的集合(MapView)
List<Overlay> overlays = mapView.getOverlays();
// ②建立自己的overlays資訊新增集合中
GraphicsOverlay overlay = new GraphicsOverlay(mapView);
// 關於幾何圖形設定
setData(overlay);
overlays.add(overlay);
// ③重新整理mapView的顯示內容
mapView.refresh();
}
/**
* 幾何圖形設定
*
* @param overlay
*/
private void setData(GraphicsOverlay overlay)
{
// 繪製圓
/**
* setCircle(GeoPoint geoPoint, int radius) 設定圖形為圓 引數: geoPoint地理座標
* radius圓的半徑,單位:米
*/
// 幾何元素的定義
// 圓心+半徑
Geometry geometry = new Geometry();
geometry.setCircle(geoPoint, 1000);
// 樣式
// 顏色+是否填充+如果不填充,繪製圓的線條的粗細
Symbol symbol = new Symbol();
/**
* setSurface
*
* public void setSurface(Symbol.Color color, int status, int linewidth)
* 設定面樣式 引數: color - 顏色 status - 填充狀態,0表示不填充,1表示填充 linewidth -
* 線寬,當填充狀態為填充時線寬無意義
*/
Symbol.Color color = symbol.new Color();
//指定三色
color.red = 255;
color.green = 0;
color.blue = 0;
color.alpha = 100;
symbol.setSurface(color, 1, 0);
Graphic graphic = new Graphic(geometry, symbol);
overlay.setData(graphic);
}
}
再設定Manifest.xml的內容即可。
2、實現目的:在底圖上畫一個文字圖形(覆蓋物)
使用到TextOverlay類,其中用到TextItem對文字進行設定。
實現效果:
TextOverlayDemo.java
package huaxa.it.map;
import java.util.List;
import com.baidu.mapapi.map.Overlay;
import com.baidu.mapapi.map.Symbol;
import com.baidu.mapapi.map.TextItem;
import com.baidu.mapapi.map.TextOverlay;
import android.graphics.Typeface;
import android.os.Bundle;
/**
* @專案名: BaiduMap
* @包名: huaxa.it.map
* @類名: TextOverlayDemo
* @建立者: 黃夏蓮
* @建立時間: 2016年12月1日 ,下午6:13:46
*
* @描述: TODO
*/
public class TextOverlayDemo extends BaseActivity
{
@Override
protected void onCreate(Bundle savedInstanceState)
{
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
draw();
}
/**
* 繪製文字圖形
*/
private void draw()
{
// 覆蓋物操作
// ①獲取存放覆蓋物的集合(MapView)
List<Overlay> overlays = mapView.getOverlays();
// ②建立自己的overlays資訊新增集合中
TextOverlay overlay = new TextOverlay(mapView);
// 關於文字圖形設定
setData(overlay);
overlays.add(overlay);
// ③重新整理mapView的顯示內容
mapView.refresh();
}
/**
* 文字條目設定
*
* @param overlay
*/
private void setData(TextOverlay overlay)
{
TextItem Item = new TextItem();
//設定文字格式
// int align
// 文字對齊方式 ,為 ALIGN_TOP,ALIGN_CENTER, ALIGN_BOTTOM中的一個值
// static int ALIGN_BOTTOM
// 文字對齊引數,下邊中點對齊
// static int ALIGN_CENTER
// 文字對齊引數,中心對齊
// static int ALIGN_TOP
// 文字對齊引數,上邊中點對齊
// Symbol.Color bgColor
// 文字背景色, 預設為透明
// Symbol.Color fontColor
// 文字顏色
// int fontSize
// 字號大小
// GeoPoint pt
// 文字顯示的位置,用經緯度座標表示
// String text
// 要顯示的文字內容
// Typeface typeface
// 文字字型, android 字體表示,為空則用系統預設字型.
Item.align = TextItem.ALIGN_TOP;
Item.fontColor = getColor();
Item.fontSize = 20;
Item.pt = geoPoint;
Item.text = "廣東工業大學";
Item.typeface = Typeface.SERIF;
overlay.addText(Item);
}
private Symbol.Color getColor(){
Symbol symbol = new Symbol();
Symbol.Color color= symbol.new Color();
color.alpha=100;
color.blue=255;
color.red=0;
color.green=0;
return color;
}
}
3、實現目的:在底圖上畫一個多條目(覆蓋物,如圖示)
實現過程:使用到ItemizedOverlay類
ItemizedOverlay(
getResources().getDrawable(R.drawable.eat_icon), mapView);//第一個引數就是圖片,第二個引數是mapView。
接著對OverlayItem進行設定,然後新增到itemizedOverlay裡面就可以了。另外,可以設定多個條目,直接設定具體座標,並新增到itemizedOverlay裡面。
實現效果
ItemizedOverlayDemo.java
package huaxa.it.map;
import java.util.List;
import android.os.Bundle;
import com.baidu.mapapi.map.ItemizedOverlay;
import com.baidu.mapapi.map.Overlay;
import com.baidu.mapapi.map.OverlayItem;
import com.baidu.platform.comapi.basestruct.GeoPoint;
/**
* @專案名: BaiduMap
* @包名: huaxa.it.map
* @類名: ItemizedOverlayDemo
* @建立者: 黃夏蓮
* @建立時間: 2016年12月2日 ,上午9:14:17
*
* @描述: 多條目覆蓋物
*/
public class ItemizedOverlayDemo extends BaseActivity
{
@Override
protected void onCreate(Bundle savedInstanceState)
{
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
controller.setZoom(16);
draw();
}
/**
* 繪製文字圖形
*/
private void draw()
{
// 覆蓋物操作
// ①獲取存放覆蓋物的集合(MapView)
List<Overlay> overlays = mapView.getOverlays();
// ②建立自己的overlays資訊新增集合中
ItemizedOverlay<OverlayItem> overlay = new ItemizedOverlay<OverlayItem>(
getResources().getDrawable(R.drawable.eat_icon), mapView);
setData(overlay);
overlays.add(overlay);
// ③重新整理mapView
mapView.refresh();
}
// 設定多條目資料
private void setData(ItemizedOverlay<OverlayItem> overlay)
{
// OverlayItem(GeoPoint point, String title, String snippet)
// protected GeoPoint mPoint
// 該item的位置
// protected String mTitle
// 該item的標題文字
// protected String mSnippet
// 該item的文字片段
String mSnippet = "該學校是由……";
OverlayItem Item = new OverlayItem(geoPoint, "廣東工業大學", mSnippet);
overlay.addItem(Item);
Item = new OverlayItem(new GeoPoint(latitude, longitude+1000), "向東", "增加經度");
overlay.addItem(Item);
Item = new OverlayItem(new GeoPoint(latitude, longitude-1000), "向西", "減少經度");
overlay.addItem(Item);
Item = new OverlayItem(new GeoPoint(latitude+1000, longitude-1000), "向西北", "增加緯度,減少經度");
overlay.addItem(Item);
}
}
4、實現目的:對上面的多條目進行泡泡顯示
實現過程:1、實現佈局pop.xml;2、實現popView的初始化操作,設定popView不可見,並把popView新增到mapView裡面。3、通過onTap()方法實現點選事件,需要更新mapView(當點選一個Item時,會彈出一個pop視窗),通過mapView.updateViewLayout(popView, params);更新View,而params裡面需要設定pop視窗的位置,所以需要先重新定義params;再設定pop視窗可見,進而設定pop視窗的顯示內容。注意:如果沒有將popView中的TextView在此處例項化,會報空指標異常。
實現效果:
pop.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/user_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dip"
android:layout_weight="1"
android:background="@drawable/popupmap"
android:gravity="center_vertical"
android:orientation="horizontal" >
<ImageView
android:id="@+id/round"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2dip"
android:src="@drawable/round" />
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:text="標題"
android:textSize="20sp" />
<ImageView
android:id="@+id/roads"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/roads" />
</LinearLayout>
修改java檔案為:
package huaxa.it.map;
import java.util.List;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.widget.TextView;
import com.baidu.mapapi.map.ItemizedOverlay;
import com.baidu.mapapi.map.MapView;
import com.baidu.mapapi.map.Overlay;
import com.baidu.mapapi.map.OverlayItem;
import com.baidu.platform.comapi.basestruct.GeoPoint;
/**
* @專案名: BaiduMap
* @包名: huaxa.it.map
* @類名: ItemizedOverlayDemo
* @建立者: 黃夏蓮
* @建立時間: 2016年12月2日 ,上午9:14:17
*
* @描述: 多條目覆蓋物
*/
public class ItemizedOverlayDemo extends BaseActivity
{
private TextView title;
private View popView;
private OverlayItem Item;
@Override
protected void onCreate(Bundle savedInstanceState)
{
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
controller.setZoom(17);
initPop();
draw();
}
// 新增泡泡
// 點選某個具體的item的時候在其上方顯示
// 載入pop
// 新增到mapview中,不用設定座標,pop隱藏
// 當點選時,顯示泡泡,位置更新
private void initPop()
{
// 初始化popView並且設定相應引數
popView = View.inflate(getApplicationContext(), R.layout.pop, null);
MapView.LayoutParams params = new MapView.LayoutParams(
MapView.LayoutParams.WRAP_CONTENT,
MapView.LayoutParams.WRAP_CONTENT, null,
MapView.LayoutParams.BOTTOM_CENTER);
mapView.addView(popView, params);
popView.setVisibility(View.INVISIBLE);// 不可見
}
/**
* 繪製文字圖形
*/
private void draw()
{
// 覆蓋物操作
// ①獲取存放覆蓋物的集合(MapView)
List<Overlay> overlays = mapView.getOverlays();
// ②建立自己的overlays資訊新增集合中
ItemizedOverlay<OverlayItem> overlay = new ItemizedOverlay<OverlayItem>(
getResources().getDrawable(R.drawable.eat_icon), mapView)
{
@Override
protected boolean onTap(int index)
{
OverlayItem item = getItem(index);
// 更新pop
MapView.LayoutParams params = new MapView.LayoutParams(
MapView.LayoutParams.WRAP_CONTENT,
MapView.LayoutParams.WRAP_CONTENT, item.getPoint(),
MapView.LayoutParams.BOTTOM_CENTER);
mapView.updateViewLayout(popView, params);
popView.setVisibility(View.VISIBLE);
//務必在這裡例項化TextView空間,否則會報空指標異常。
title = (TextView) findViewById(R.id.title);
title.setText(item.getTitle());
return super.onTap(index);
}
};
setData(overlay);
overlays.add(overlay);
// ③重新整理mapView
mapView.refresh();
}
// 設定多條目資料
private void setData(ItemizedOverlay<OverlayItem> overlay)
{
// OverlayItem(GeoPoint point, String title, String snippet)
// protected GeoPoint mPoint
// 該item的位置
// protected String mTitle
// 該item的標題文字
// protected String mSnippet
// 該item的文字片段
String mSnippet = "該學校是由……";
Item = new OverlayItem(geoPoint, "廣東工業大學", mSnippet);
overlay.addItem(Item);
Item = new OverlayItem(new GeoPoint(latitude, longitude + 1000), "向東",
"增加經度");
overlay.addItem(Item);
Item = new OverlayItem(new GeoPoint(latitude, longitude - 1000), "向西",
"減少經度");
overlay.addItem(Item);
Item = new OverlayItem(new GeoPoint(latitude + 1000, longitude - 1000),
"向西北", "增加緯度,減少經度");
overlay.addItem(Item);
}
}