- android 百度地图描绘POI
-
首先还是一贯作风,请大家先看一些图例:
在上一篇介绍了地图显示自己的位置,在这一篇呢,我简单介绍下在地图如何show出来一系列POI(兴趣点)
首先我们从服务器拉取要标记POI的信息如(lat,lon,Tag等信息)然后就是根据经纬度创建ItemizedOverlay.这个是用于显示一系列的POI.
代码片段:
在onLocationChanged调用:
[java]
/***
* Location 监听
*
* @param arg0
*/
@Override
public void onLocationChanged(Location location) {
if (location != null) {
// 获取自己的经纬度点
GeoPoint geoPoint = new GeoPoint(
(int) (location.getLatitude() * 1e6),
(int) (location.getLongitude() * 1e6));
mMapController.setCenter(geoPoint);
addItemizedOverlay(geoPoint.getLatitudeE6() / 1e6,
geoPoint.getLongitudeE6() / 1e6);// 定位一系列点
// addOverLay(geoPoint);
}
}
[java]
/***
* 添加一系列的overlay 范围在5000米内
*
* @param lat
* 纬度
* @param lon
* 经度
*/
void addItemizedOverlay(double lat, double lon) {
arrayList = new ArrayList<MarkInfo>();
// 获取服务器返回的一系列点
ArrayList<MarkInfo> markInfos = Constent.getArrayListPoint();
for (int i = 0; i < markInfos.size(); i++) {
MarkInfo markInfo = markInfos.get(i);
Double dis = MyUtil.getGeoPointDistance(lat, lon, markInfo.lat,
markInfo.lon);
if (dis <= distance)
arrayList.add(markInfo);
}
Drawable marker = getResources().getDrawable(R.drawable.item);
marker.setBounds(0, 0, marker.getIntrinsicWidth(),
marker.getIntrinsicHeight()); // 为maker定义位置和边界
overlays = mMapView.getOverlays();
myItemizedOverlay = new MyItemizedOverlay(marker, this, arrayList);
myItemizedOverlay.setMapView(mMapView);
overlays.add(myItemizedOverlay);
mPopView = createMarkView();// 获取冒泡view
myItemizedOverlay.setmPopView(mPopView);
// 将泡泡添加到mMapView上
mMapView.addView(mPopView, new MapView.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, null,
MapView.LayoutParams.WRAP_CONTENT));
mPopView.setVisibility(View.GONE);
}
[java]
/***
* 创建点击mark时的弹出泡泡
*/
public View createMarkView() {
layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
mPopView = layoutInflater.inflate(R.layout.popview, null);
TextView textView = (TextView) mPopView.findViewById(R.id.snippet);
mPopView.setTag(textView);
return mPopView;
}
这里我简单模拟获取服务器的一系列的poi. 并计算自身与这些poi的位置距离,如果小于5000.则显示出来.
在这里说明一下:首先服务器边的处理,不能把所有的poi数据都返回给我们,如果是这样,那么手机就会很耗时会吃不消,不符合移动项目的需求,服务器端:应该对这一系列的poi进行处理,比如根据地区划分开来,如:我传给服务器参数上海浦东,那么只返回给我浦东一系列的poi,这样就解决了这个问题,另外,最好的办法是这段逻辑最好在服务器端,我们请求服务器的参数把距离5000也带过去,返回给我们直接就是要show的poi,这样设计最好了.扯了有点偏了,不过我是初学者,就简单记录下来,如有不妥或着更简单的方法,还请您指示一二,谢谢在先了.
MyItemizedOverlay.java
[java]
package com.jj.baidu;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Point;
import android.graphics.drawable.Drawable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.widget.TextView;
import android.widget.Toast;
import com.baidu.mapapi.GeoPoint;
import com.baidu.mapapi.ItemizedOverlay;
import com.baidu.mapapi.MapView;
import com.baidu.mapapi.OverlayItem;
import com.baidu.mapapi.Projection;
import com.jj.modle.MarkInfo;
/***
* 系列覆盖物
*
* @author zhangjia
*
*/
public class MyItemizedOverlay extends ItemizedOverlay<OverlayItem> {
private List<OverlayItem> overlayItems;
private OverlayItem overlayItem, overlayItem2, overlayItem3, overlayItem4,
overlayItem5, overlayItem6;
private Context mContext;
private Drawable marker;// 覆盖物图标
private View mPopView = null; // 点击mark时弹出的气泡View
private MapView mapView;
private ArrayList<MarkInfo> markInfos;// 一系列经纬度点
// 注入地图map
public void setMapView(MapView mapView) {
this.mapView = mapView;
}
// 注入泡泡view
public void setmPopView(View mPopView) {
this.mPopView = mPopView;
}
public MyItemizedOverlay(Drawable marker, Context context,
ArrayList<MarkInfo> markInfos) {
super(boundCenterBottom(marker));
this.mContext = context;
this.marker = marker;
this.markInfos = markInfos;
overlayItems = new ArrayList<OverlayItem>();
for (int i = 0; i < markInfos.size(); i++) {
/***
* 第一个参数是GeoPoint,第二个参数是title.通过overlayItem.getTitle()可以获取到,
* 第三个参数是Snippet,通过overlayItem.getSnippet()获取到.
*/
GeoPoint geoPoint = new GeoPoint(
(int) (markInfos.get(i).lat * 1e6),
(int) (markInfos.get(i).lon * 1e6));
overlayItem = new OverlayItem(geoPoint, i + "",
markInfos.get(i).Tag);
overlayItems.add(overlayItem);
}
populate(); // createItem(int)方法构造item。一旦有了数据,在调用其它方法前,首先调用这个方法
}
@Override
public void draw(Canvas canvas, MapView mapView, boolean shadow) {
// super.draw(canvas, mapView, shadow);
// Projection接口用于屏幕像素坐标和经纬度坐标之间的变换
// 这里可以在point旁边draw 一些文字.
// Projection projection = mapView.getProjection();
// for (int i = 0; i < overlayItems.size(); i++) {
// OverlayItem overlayItem = overlayItems.get(i);
// String title = overlayItem.getTitle();
// // 把经纬度变换到相对于MapView左上角的屏幕像素坐标
// Point point = projection.toPixels(overlayItem.getPoint(), null);
//
// // 可在此处添加您的绘制代码
// Paint paintText = new Paint();
// paintText.setColor(Color.BLUE);
// paintText.setTextSize(15);
// canvas.drawText(title, point.x - 30, point.y, paintText); // 绘制文本
// }
super.draw(canvas, mapView, shadow);
// 调整一个drawable边界,使得(0,0)是这个drawable底部最后一行中心的一个像素
boundCenterBottom(marker);
}
@Override
protected OverlayItem createItem(int position) {
return overlayItems.get(position);
}
@Override
public int size() {
return overlayItems.size();
}
// 处理当点击事件
@Override
protected boolean onTap(final int i) {
// 获取点击的GeoPoint
GeoPoint geoPoint = overlayItems.get(i).getPoint();
// 获取大头针的宽高,
int x = marker.getIntrinsicHeight();
int y = marker.getIntrinsicWidth();
/***
* 显示泡泡 参数是要显示的view 水平多少有些偏差,
*
* 可以自己进行调整,垂直则让显示在大头针的中间部位即可.即-y/2.
*/
mapView.updateViewLayout(mPopView, new MapView.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, geoPoint,
-3, -y / 2, MapView.LayoutParams.BOTTOM_CENTER));
mPopView.setVisibility(View.VISIBLE);
mapView.getController().animateTo(geoPoint);// 移动到中间
TextView textView = (TextView) mPopView.getTag();
textView.setText(overlayItems.get(i).getSnippet());
mPopView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(mContext, overlayItems.get(i).getSnippet(), 1)
.show();
}
});
return super.onTap(i);
}
}
注释已经很详细,这里不过多介绍.
在这里我简单说明一下:点击地图上的poi标记弹出来的气泡mPopView如何显示.
[java]
mapView.updateViewLayout(mPopView, new MapView.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, geoPoint,
-3, -y / 2, MapView.LayoutParams.BOTTOM_CENTER));
第4,5个参数是相对于(geopoint对应屏幕上point的点)来说的.如果不写则表示0,0,则那么mPopView的和poi点将重合,很不友好,你可以测试一下就明白了.因此我们要让mPopView显示在poi的中间,则让mPopView上移(poi的宽度/2)。相信大家都明白的.(你可以看下面运行结果)
在这里我给出如何根据两经纬度点计算之间的距离和方位方法:
[java]
public class MyUtil {
// 地球半径
private static final double EARTH_RADIUS = 6378137.0;
/***
* 返回 两个GeoPoint之间的距离
*/
public static double getGeoPointDistance(double lat_a, double lng_a,
double lat_b, double lng_b) {
double radLat1 = (lat_a * Math.PI / 180.0);
double radLat2 = (lat_b * Math.PI / 180.0);
double a = radLat1 - radLat2;
double b = (lng_a - lng_b) * Math.PI / 180.0;
double s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2)
+ Math.cos(radLat1) * Math.cos(radLat2)
* Math.pow(Math.sin(b / 2), 2)));
s = s * EARTH_RADIUS;
s = Math.round(s * 10000) / 10000;
return s;
}
/***
* 返回 两个GeoPoint之间的方位角
*/
public static String getGeoPointCorner(double lat_a, double lng_a,
double lat_b, double lng_b) {
double d = 0;
lat_a = lat_a * Math.PI / 180;
lng_a = lng_a * Math.PI / 180;
lat_b = lat_b * Math.PI / 180;
lng_b = lng_b * Math.PI / 180;
d = Math.sin(lat_a) * Math.sin(lat_b) + Math.cos(lat_a)
* Math.cos(lat_b) * Math.cos(lng_b - lng_a);
d = Math.sqrt(1 - d * d);
d = Math.cos(lat_b) * Math.sin(lng_b - lng_a) / d;
d = Math.asin(d) * 180 / Math.PI;
// d = Math.round(d*10000);
return d + "";
}
}
自身定位(嘿嘿,有兄弟一起的么)
这些数据没有任何联系,我是随便找的,大家可以根据项目需求进行适度调整,
另外点击左下角定位按钮会定位到自身方位.具体实现也很简单,我们直接引用为我们封装了一切的LocationOverLay类,
mMapView.getController().animateTo(locationOverlay.getMyLocation()); 即可.
如果想让箭头跟着自己位置进行移动:
[java]
/***
* 当位置变化时就会跟进
*/
locationOverlay.runOnFirstFix(new Runnable() {
@Override
public void run() {
mMapView.getController().animateTo(
locationOverlay.getMyLocation());
}
});
测试没有问题,不过和百度地图相比逊色不是一点点,移动很不连贯.原因正在研究中,如有知道的朋友请指示一二.
先说道这里,以后慢慢补充添加.APP应用一般就是这些功能.主要是show一系列的POI.简单说到这里.如有发现会及时更新.
如有问题请留言,Thanks for you 。