开发者社区> 技术小胖子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【如何在Google Map上显示地标】

简介:
+关注继续查看

    bill在【如何在Android中使用GoogleMap API】一文中介绍了在Android开发中使用GoogleMap API所需的准备工作,本文将在该准备工作就绪的前提下介绍如何在GoogleMap上显示自定义的地标。如下图所示: 

    其实Google Map中的地标(或者说图标更贴切)就是位于地图图层上的一个新图层,我们只需要简单的将自己的图标(或者是图标集合)添加到Google Map内置的图标图层里去即可。

    以上文中的HelloGoogleMap为例

activity_main.xml


  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  2.     xmlns:tools="http://schemas.android.com/tools" 
  3.     android:layout_width="fill_parent" 
  4.     android:layout_height="fill_parent" > 
  5.  
  6.     <com.google.android.maps.MapView 
  7.         android:id="@+id/mapview" 
  8.         android:layout_width="fill_parent" 
  9.         android:layout_height="fill_parent" 
  10.         android:apiKey="你所获得的API KEY" 
  11.         android:clickable="true" /> 
  12.  
  13. </RelativeLayout> 
     

  1. package com.billhoo.study.hellogooglemaps; 
  2.  
  3. import java.util.List; 
  4.  
  5. import android.graphics.drawable.Drawable; 
  6. import android.os.Bundle; 
  7.  
  8. import com.google.android.maps.GeoPoint; 
  9. import com.google.android.maps.MapActivity; 
  10. import com.google.android.maps.MapView; 
  11. import com.google.android.maps.Overlay; 
  12. import com.google.android.maps.OverlayItem; 
  13.  
  14. public class MainActivity extends MapActivity { 
  15.     MapView mMapView = null;  //Google Map 对象 
  16.      
  17.     @Override 
  18.     public void onCreate(Bundle savedInstanceState) { 
  19.         super.onCreate(savedInstanceState); 
  20.         setContentView(R.layout.activity_main); 
  21.         mMapView = (MapView) findViewById(R.id.mapview); 
  22.         mMapView.setBuiltInZoomControls(true); // 使用內置放大縮小控制按钮 
  23.          
  24.     @Override 
  25.     protected boolean isRouteDisplayed() { 
  26.         return false
  27.     } 

    上述代码能够在MainActivity中显示GoogleMap,接下来我们将编写自定义的图标类HelloItemizedOverlay,本类维护一个图标集合,并在需要时由用户将本类对象添加进GoogleMap内置的图标集合中去,从而实现地图上图标的显示以及其他相关操作。代码如下:


  1. package com.billhoo.study.hellogooglemaps; 
  2.  
  3. import java.util.ArrayList; 
  4.  
  5. import android.app.AlertDialog; 
  6. import android.content.Context; 
  7. import android.graphics.drawable.Drawable; 
  8.  
  9. import com.google.android.maps.ItemizedOverlay; 
  10. import com.google.android.maps.OverlayItem; 
  11.  
  12. @SuppressWarnings("rawtypes"
  13. public class HelloItemizedOverlay extends ItemizedOverlay { 
  14.     private ArrayList<OverlayItem> mOverlayItems = new ArrayList<OverlayItem>(); // 由本类维护的自定义图标集合和 
  15.     private Context mContext = null
  16.      
  17.     public HelloItemizedOverlay(Drawable defaultMarker) { 
  18.         super(boundCenter(defaultMarker)); // 使用默认图标初始化父类 
  19.     } 
  20.      
  21.     public HelloItemizedOverlay(Drawable defaultMarker, Context context) { 
  22.         super(boundCenter(defaultMarker)); 
  23.         mContext = context; 
  24.     } 
  25.      
  26.     @Override 
  27.     protected OverlayItem createItem(int i) { 
  28.         return mOverlayItems.get(i); 
  29.     } 
  30.      
  31.     @Override 
  32.     public int size() { 
  33.         return mOverlayItems.size(); 
  34.     } 
  35.      
  36.     /** 
  37.      * 当图标被点击时 
  38.      */ 
  39.     @Override 
  40.     protected boolean onTap(int index) { 
  41.         OverlayItem item = mOverlayItems.get(index); 
  42.         AlertDialog.Builder dialog = new AlertDialog.Builder(mContext); 
  43.         dialog.setTitle(item.getTitle()); 
  44.         dialog.setMessage(item.getSnippet()); 
  45.         dialog.show(); 
  46.         return true
  47.     } 
  48.      
  49.     /** 
  50.      * 在本类维护的图标集合中添加一个新的图标 
  51.      *  
  52.      * @param overlay 
  53.      */ 
  54.     public void addOverlay(OverlayItem overlay) { 
  55.         mOverlayItems.add(overlay); 
  56.         populate(); 
  57.     } 

    上述代码算是一个固定结构,期间重载了父类ItemizedOverlay的createItem(int i)、size()以及onTap(int index)方法,并且新增了一个用于添加新图标的addOverlay(OverlayItem overlay)方法(今后可以根据自己的需要增加诸如clear()、remove()等常用方法)。

    接下来需要做的事情便是利用上述工具类进行图标的添加了,修改后的MainActivity如下:


  1. package com.billhoo.study.hellogooglemaps; 
  2.  
  3. import java.util.List; 
  4.  
  5. import android.graphics.drawable.Drawable; 
  6. import android.os.Bundle; 
  7.  
  8. import com.google.android.maps.GeoPoint; 
  9. import com.google.android.maps.MapActivity; 
  10. import com.google.android.maps.MapView; 
  11. import com.google.android.maps.Overlay; 
  12. import com.google.android.maps.OverlayItem; 
  13.  
  14. public class MainActivity extends MapActivity { 
  15.     private MapView mMapView = null// Google Map 对象 
  16.      
  17.     @Override 
  18.     public void onCreate(Bundle savedInstanceState) { 
  19.         super.onCreate(savedInstanceState); 
  20.         setContentView(R.layout.activity_main); 
  21.         mMapView = (MapView) findViewById(R.id.mapview); 
  22.         mMapView.setBuiltInZoomControls(true); // 使用內置放大縮小控制按钮 
  23.          
  24.         List<Overlay> mapOverlays = mMapView.getOverlays(); // 获取GoogleMap内置的图标集合 
  25.         Drawable drawable = this.getResources().getDrawable( 
  26.                 R.drawable.cur_location); 
  27.         HelloItemizedOverlay itemizedOverlays = new HelloItemizedOverlay( 
  28.                 drawable, this); // 使用cur_location这个图标初始化我们的工具类HelloItemizedOverlay 
  29.          
  30.         GeoPoint point1 = new GeoPoint((int) (35.422006 * 1E6), 
  31.                 (int) (104.084095 * 1E6)); // 构建一个GeoPoint位置对象,经度35.422006,纬度104.084095 
  32.         OverlayItem overlayItem1 = new OverlayItem(point1, "我的第一个地标""随便找个点"); // 构建我们的第一个自定义图标,位于point1处 
  33.          
  34.         GeoPoint point2 = new GeoPoint((int) (35.4 * 1E6), (int) (139.46 * 1E6)); // 同上 
  35.         OverlayItem overlayItem2 = new OverlayItem(point2, "这是第二个图标""随便找的地点"); // 同上 
  36.          
  37.         itemizedOverlays.addOverlay(overlayItem1); // 将我们的第一个图标添加进自定义图标集合 
  38.         itemizedOverlays.addOverlay(overlayItem2); // 将我们的第二个图标添加进该集合 
  39.          
  40.         mapOverlays.add(itemizedOverlays); // 将我们的自定义图标集itemizedOverlays添加到GoogleMap内置的图标集合中去 
  41.     } 
  42.      
  43.     @Override 
  44.     protected boolean isRouteDisplayed() { 
  45.         return false
  46.     } 

    到此为止,在GoogleMap上显示自定义图标的基础部分已经全部完工,运行模拟器看看效果吧。

    依次点击第一个以及第二个气泡,便会弹出我们之前设置好的提示信息

 

    细心的朋友会发现,气泡的阴影部分怎么没有正确显示?别忙,请在代码段中加入如下处理 


  1. ... 
  2.         OverlayItem overlayItem2 = new OverlayItem(point2, "这是第二个图标""随便找的地点"); // 同上 
  3.          
  4.         // 使图标阴影正确显示 
  5.         Drawable marker = this.getResources().getDrawable( 
  6.                 R.drawable.cur_location); 
  7.         int w = marker.getIntrinsicWidth(); 
  8.         int h = marker.getIntrinsicHeight(); 
  9.         marker.setBounds(-w / 2, -h, w / 20); 
  10.          
  11.         overlayItem1.setMarker(marker); // 将overlayItem1的图标重新设置成marker 
  12.         // overlayItem2.setMarker(marker); //为了演示区别,第二个点不重新设置 
  13.          
  14.         itemizedOverlays.addOverlay(overlayItem1); // 将我们的第一个图标添加进自定义图标集合 
  15. ... 

    再次运行,发现第一个点的阴影已经正确显示了。

    到此,bill已经将图标的添加介绍完毕,其中还包括了自己遇到的阴影错位问题的修正方法。但是,Android Google Map的陷阱还有很多,这也是bill这段时间以来一直在折腾的原因。接下来的文章,bill将一一向大家分享这些陷阱的解决方案,希望能够帮到那些像bill之前那样,对其中各种莫名其妙的异常或错误百思不得其解的朋友。




     本文转自Bill_Hoo 51CTO博客,原文链接:http://blog.51cto.com/billhoo/970811,如需转载请自行联系原作者






版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
GoogleMap 导航
GoogleMap 导航
0 0
Google Earth Engine(GEE)——制作下拉菜单显示逐个波段信息分析
Google Earth Engine(GEE)——制作下拉菜单显示逐个波段信息分析
0 0
Google Earth Engine(GEE)——影像集合的按照行列号搜索并且统计影像数量包括时间、云量和最新影像筛选!
Google Earth Engine(GEE)——影像集合的按照行列号搜索并且统计影像数量包括时间、云量和最新影像筛选!
0 0
Google Earth Engine(GEE)——区域按面积大小筛选
Google Earth Engine(GEE)——区域按面积大小筛选
0 0
GEE(Google Earth Engine)如何将集合中影像绘制成为图层?
GEE(Google Earth Engine)如何将集合中影像绘制成为图层?
0 0
在GEE上展示影像和显示大小
在GEE上展示影像和显示大小
0 0
openlayers4加载百度地图、百度影像图、谷歌地图、谷歌影像图
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/79994141 openlayers4加载百度地图、百度影像图、谷歌地图、谷歌影像图 http://www.
2150 0
如何在WindowsPhone Bing Map控件中显示必应中国中文地图、谷歌中国中文地图。
原文:如何在WindowsPhone Bing Map控件中显示必应中国中文地图、谷歌中国中文地图。 最近正好有点业余时间,所以在做做各种地图。Bing Map控件本身就能显示必应地图,但是很遗憾微软在Bing Map控件中只提供两种地图模式:全球道路地图RoadMode、全球卫星地图AerialMode,卫星地图对咱们这些个凡人是没啥用的,全球道路地图又不显示天朝地图,因为咱们伟大的天朝政府要求在天朝内发布的地图都要加上随机偏移量才能发布。
1022 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载