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"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <com.google.android.maps.MapView android: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.158216 GeoPoint wal1 = new GeoPoint( (int)(24.477384 * 1000000), (int)(118.158216 * 1000000)); //24.468967,118.114277 GeoPoint wal2 = new GeoPoint( (int)(24.468967 * 1000000), (int)(118.114277 * 1000000)); //24.501091,118.126781 GeoPoint 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(); } @Override public void draw(Canvas canvas, MapView mapView, boolean shadow) { // TODO Auto-generated method stub super.draw(canvas, mapView, shadow); //显示图标，图标位置在目标点下面，居中的位置 boundCenterBottom(marker); } @Override protected OverlayItem createItem(int i) { // TODO Auto-generated method stub return items.get(i); } @Override public int size() { // TODO Auto-generated method stub return 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方法：

 

 

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

创建标记沃尔玛位置的Overlay完成了，然后就是要将这个Overlay添加到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.png Drawable 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; @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.png Drawable 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()); } @Override protected 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.158216 GeoPoint wal1 = new GeoPoint( (int)(24.477384 * 1000000), (int)(118.158216 * 1000000)); //24.468967,118.114277 GeoPoint wal2 = new GeoPoint( (int)(24.468967 * 1000000), (int)(118.114277 * 1000000)); //24.501091,118.126781 GeoPoint 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(); } @Override public void draw(Canvas canvas, MapView mapView, boolean shadow) { // TODO Auto-generated method stub super.draw(canvas, mapView, shadow); //显示图标，图标位置在目标点下面，居中的位置 boundCenterBottom(marker); } @Override protected OverlayItem createItem(int i) { // TODO Auto-generated method stub return items.get(i); } @Override public int size() { // TODO Auto-generated method stub return 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