android google map — ItemizedOverlay

 

上一篇文章我们讲解了如何控制MapView，但是仅有这样的UI交互还远远不能满足很多需求，因为你只能看到地图，无法在它上面做一些标记，而很多应用都对这个功能有需求(搜索地点、查找路线等)。所以为了更好的使用google map开发基于位置的服务，google map提供了在地图层上放一些自定义的数据和图标的功能，例如：我们在web浏览器中使用google map搜索一个地点时，它会在地图上标记出来：

地图中的A,B,C 3点就是在地图上放置一些自定义的标记(全局上看，我们马上就了解厦门有三家沃尔玛)，从计算机术语上说就是往地图上添加一层Overlay，标记就是处于这个Overlay层。Google Map允许你在地图上添加多个Overlay层，如我需要再上面查询结果的基础上获取一条路线信息：

 

如上面，就又添加了一个Overlay层，标记了从厦门人民政府到洪文沃尔玛的路线。理论上你可以在地图上添加任意多个Overlay层，不过最好还是不要放置太多Overlay，不然整个地图就会显得很凌乱。下面本文就介绍下如何在Android中，在MapView对象中添加Overlay标记层。

Google Map包提供了一个基类Overlay用来处理标记层，但是我们经常使用的是它的扩展类：ItemizedOverlay，它对标记的展现做了一层封装，让我们能更简单的使用它。它是一个专门提供的让用户进行扩展的类，一般我们需要创建一个继承它的类，然后重写它内部的一些方法，最后将这个Overlay加到MapView上，最终它就会显示对应标记的地点，下面我们就做一个例子来标记一些地点。

首先创建MapView对象和MapActivity，这些步骤从第一次接触MapView和MapActivity就开始使用，这边就不累赘介绍了。

res/layout/marker.xml：

<?xml version="1.0" encoding="utf-8"?> <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"><com.google.android.maps.MapViewandroid:id="@+id/map_view"android:layout_width="fill_parent"android:layout_height="fill_parent"android:clickable="true"android:apiKey="your google map api key"/></RelativeLayout> 

接下去我们创建需要标记的Overlay，因为它需要一个标记的图标，我们就从网上找了这个：(你可以保存这个图标为marker.png，然后把它放到你项目的res/drawable-hdpi中)。然后我们创建一个类，继承ItemizedLayout，然后实现它的一些抽象方法和构造方法：

class WalmartLocations extends ItemizedOverlay{List<OverlayItem> items = new ArrayList<OverlayItem>();;Drawable marker;public WalmartLocations(Drawable marker){super(marker);this.marker = marker;//找出厦门3个沃尔玛的经纬度 构造确定点 GeoPoint来表示他们的位置//24.477384,118.158216GeoPoint wal1 = new GeoPoint((int)(24.477384 * 1000000),(int)(118.158216 * 1000000));//24.468967,118.114277GeoPoint wal2 = new GeoPoint((int)(24.468967 * 1000000),(int)(118.114277 * 1000000));//24.501091,118.126781GeoPoint wal3 = new GeoPoint((int)(24.501091 * 1000000),(int)(118.126781 * 1000000));//将GeoPoint 添加到Overlay中items.add(new OverlayItem(wal1, "沃尔玛购物广场(洪文分店)", "地处瑞景商业广场对面"));items.add(new OverlayItem(wal2, "沃尔玛购物广场", "火车站附近"));items.add(new OverlayItem(wal3, "沃尔玛", "扁食嫂和麦当劳"));//这行代码很重要，就是将Overlay层的标记显示出来populate();}@Overridepublic void draw(Canvas canvas, MapView mapView, boolean shadow) {// TODO Auto-generated method stubsuper.draw(canvas, mapView, shadow);//显示图标，图标位置在目标点下面，居中的位置boundCenterBottom(marker);}@Overrideprotected OverlayItem createItem(int i) {// TODO Auto-generated method stubreturn items.get(i);}@Overridepublic int size() {// TODO Auto-generated method stubreturn items.size();}} 

WalmartLocations类就是一个Overlay，它的构造方法接收了一个Drawable参数，这个参数就是需要显示在定点位置的图标，我们用上面的marker.png图片来做标记图标。然后在构造方法中，它添加了三个GeoPoint，然后将这些GeoPoint转化为OverlayItem对象，保存在WalmartLocations对象中。然后重写两个抽象方法: createItem和size。这两个方法的作用是：

1. size：这个方法来确定这个Overlay需要标记多少个点。

2. createItem：这个方法用来将对应的GeoPoint所构造的OverlayItem对象取出来。

有了这两个方法再配合在构造方法里所用的图标和标记的三个点，我们就可以在Overlay上将这三个点用所定义的marker.png这个标记图标标记出来，具体执行标记的方法的draw，所以这边我们重写ItemizedOverlay类中的draw方法：

 

 

@Override public void draw(Canvas canvas, MapView mapView, boolean shadow) {// TODO Auto-generated method stubsuper.draw(canvas, mapView, shadow);//显示图标，图标位置在目标点下面，居中的位置boundCenterBottom(marker); } 

创建标记沃尔玛位置的Overlay完成了，然后就是要将这个Overlay添加到MapView中：

 

@Override protected void onCreate(Bundle icicle) {super.onCreate(icicle);setContentView(R.layout.marker);mapView = (MapView) findViewById(R.id.map_view);mapView.setBuiltInZoomControls(true); //设置自动缩放控制mapView.setSatellite(false); //不显示卫星视图//获取标记图片： marker.pngDrawable marker = getResources().getDrawable(R.drawable.marker);//设置图片的绘制区域大小marker.setBounds(0, 0, marker.getIntrinsicWidth(), marker.getIntrinsicHeight());//创建Overlay层WalmartLocations walmartPlaces = new WalmartLocations(marker);//将创建的Overlay层添加到MapView中。mapView.getOverlays().add(walmartPlaces);//设置缩放级别mapView.getController().setZoom(17);//将地图移动到 Overlay层标记的几个对象的第一个标记点(不是中心点)mapView.getController().setCenter(walmartPlaces.getCenter());} 

全部代码，LocationMarkerActivity.java：

 

 

import java.util.ArrayList; import java.util.List;import android.graphics.Canvas; import android.graphics.drawable.Drawable; import android.os.Bundle;import com.google.android.maps.GeoPoint; import com.google.android.maps.ItemizedOverlay; import com.google.android.maps.MapActivity; import com.google.android.maps.MapView; import com.google.android.maps.OverlayItem;public class LocationMarkerActivity extends MapActivity {MapView mapView;@Overrideprotected void onCreate(Bundle icicle) {super.onCreate(icicle);setContentView(R.layout.marker);mapView = (MapView) findViewById(R.id.map_view);mapView.setBuiltInZoomControls(true); //设置自动缩放控制mapView.setSatellite(false); //不显示卫星视图//获取标记图片： marker.pngDrawable marker = getResources().getDrawable(R.drawable.marker);//设置图片的绘制区域大小marker.setBounds(0, 0, marker.getIntrinsicWidth(), marker.getIntrinsicHeight());//创建Overlay层WalmartLocations walmartPlaces = new WalmartLocations(marker);//将创建的Overlay层添加到MapView中。mapView.getOverlays().add(walmartPlaces);//设置缩放级别mapView.getController().setZoom(17);//将地图移动到 Overlay层标记的几个对象的第一个标记点(不是中心点)mapView.getController().setCenter(walmartPlaces.getCenter());}@Overrideprotected boolean isRouteDisplayed() {return false;}class WalmartLocations extends ItemizedOverlay{List<OverlayItem> items = new ArrayList<OverlayItem>();;Drawable marker;public WalmartLocations(Drawable marker){super(marker);this.marker = marker;//找出厦门3个沃尔玛的经纬度 构造确定点 GeoPoint来表示他们的位置//24.477384,118.158216GeoPoint wal1 = new GeoPoint((int)(24.477384 * 1000000),(int)(118.158216 * 1000000));//24.468967,118.114277GeoPoint wal2 = new GeoPoint((int)(24.468967 * 1000000),(int)(118.114277 * 1000000));//24.501091,118.126781GeoPoint wal3 = new GeoPoint((int)(24.501091 * 1000000),(int)(118.126781 * 1000000));//将GeoPoint 添加到Overlay中items.add(new OverlayItem(wal1, "沃尔玛购物广场(洪文分店)", "地处瑞景商业广场对面"));items.add(new OverlayItem(wal2, "沃尔玛购物广场", "火车站附近"));items.add(new OverlayItem(wal3, "沃尔玛", "扁食嫂和麦当劳"));//这行代码很重要，就是将Overlay层的标记显示出来populate();}@Overridepublic void draw(Canvas canvas, MapView mapView, boolean shadow) {// TODO Auto-generated method stubsuper.draw(canvas, mapView, shadow);//显示图标，图标位置在目标点下面，居中的位置boundCenterBottom(marker);}@Overrideprotected OverlayItem createItem(int i) {// TODO Auto-generated method stubreturn items.get(i);}@Overridepublic int size() {// TODO Auto-generated method stubreturn items.size();}}} 

最后别忘了AndroidMenifest.xml：

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android"package="com.android777.demo.map"android:versionCode="1"android:versionName="1.0"><application android:icon="@drawable/icon" android:label="@string/app_name"><uses-library android:name="com.google.android.maps" /><activity android:name=".LocationMarkerActivity"android:label="@string/app_name"><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intent-filter></activity></application><uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /><uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /><uses-permission android:name="android.permission.INTERNET"/></manifest> 

最终的效果是:

可以看到中心有个，那个就是洪文沃尔玛的位置(PS：我就经常去那里买东西，刚发现我搜索洪文沃尔玛时经纬度，由于在google map上定位时鼠标有偏差，所以位置不精确，正确位置应该是再偏右边一点，后面两个沃尔玛位置就比较精确了)。我们通过控制缩小地图再看看全部标记的效果：

火车站沃尔玛的位置：

这边的位置就比较精确了(因为我是在地图上点击获取经纬度，所以难免有偏差)。综上我们可以得出要创建标记层Overlay的几个步骤：

1. 创建一个Overlay类，继承ItemizedOverlay。

2. 实现其抽象方法，并添加一个构造方法，构造方法接受的参数是一个Drawable对象，也就是标记的图标。

3. Overlay类，内部保存需要标记的点(这些点可以通过经纬度构造一个GeoPoint，然后通过GeoPoint构造一个OverlayItem对象)。

4.  创建标记的点可以放在构造方法中，记得在构造方法最后调用populate方法弹出标记的点。

5.  在实现的ItemizedOverlay的抽象方法中，根据上面保存的标记的点，确定需要创建的标记点的数量和各个点如何获取(重写createItem)。

6.  重写draw方法，设置图标要显示的位置(boundCenterBottom(marker) ) 。

7. 将创建的Overlay对象 添加到MapView的Overlays层中。(已经完成标记显示步骤)

8.  移动地图到Overlay所标记的位置(注意调用Overlay.getCenter() 不是获取中心点，而是添加的第一个标记点)，可选步骤。

 

转载请注明： 转载自android777

本文链接地址: android开发中-使用MapView和MapActivity — ItemizedOverlay