百度地图覆盖物Marker与infoWindow的使用

来源：互联网发布：淘宝化妆品名称大全编辑：程序博客网时间：2024/04/30 20:04

参考博客: http://blog.csdn.net/lmj623565791/article/details/37737213

对于Marker覆盖物与infoWindow的使用.
首先对于Marker的展现于infowindow的展现,需要从服务器后台中获取到
信息,包括: 经纬度,距离,商家名称,图片信息等.
然后构造成Marker对象显示在百度地图中.
当我们点击Marker覆盖物的时候,弹出InfoWindow窗口.
当我们点击InfoWindow窗口之时,处理事件,使窗口消失.
当我们点击地图之时,让所有的InfoWindow消失.

主要是处理一些监听事件:
OnMarkerClickListener, OnMapClickListener, OnInfoWindowClickListener
当我们处理覆盖物的事件时,不仅显示InfoWindow信息,而且将底部隐藏的布局显示出来.

模拟后台提供的数据:

public class Info implements Serializable{    private static final long serialVersionUID = -758459502806858414L;    /**     * 精度     */    private double latitude;    /**     * 纬度     */    private double longitude;    /**     * 图片ID，真实项目中可能是图片路�?    */    private int imgId;    /**     * 商家名称     */    private String name;    /**     * 距离     */    private String distance;    /**     * 赞数�?  */    private int zan;    public static List<Info> infos = new ArrayList<Info>();    static    {        infos.add(new Info(34.242652, 108.971171, R.drawable.a01, "英伦贵族小旅�?",                "距离2090", 1456));        infos.add(new Info(34.242952, 108.972171, R.drawable.a02, "沙井国际洗浴会所",                "距离897", 456));        infos.add(new Info(34.242852, 108.973171, R.drawable.a03, "五环服装",                "距离249", 1456));        infos.add(new Info(34.242152, 108.971971, R.drawable.a04, "老米家泡馍小",                "距离679", 1456));    }    public Info()    {    }    public Info(double latitude, double longitude, int imgId, String name,            String distance, int zan)    {        super();        this.latitude = latitude;        this.longitude = longitude;        this.imgId = imgId;        this.name = name;        this.distance = distance;        this.zan = zan;    }    public double getLatitude()    {        return latitude;    }    public void setLatitude(double latitude)    {        this.latitude = latitude;    }    public double getLongitude()    {        return longitude;    }    public void setLongitude(double longitude)    {        this.longitude = longitude;    }    public String getName()    {        return name;    }    public int getImgId()    {        return imgId;    }    public void setImgId(int imgId)    {        this.imgId = imgId;    }    public void setName(String name)    {        this.name = name;    }    public String getDistance()    {        return distance;    }    public void setDistance(String distance)    {        this.distance = distance;    }    public int getZan()    {        return zan;    }    public void setZan(int zan)    {        this.zan = zan;    }}

然后,触发事件,将经纬度的信息添加到百度的图层:

//添加图层    public void addInfoOverlay(List<Info> infos){        //清理百度地图的标志物        baiduMap.clear();        ///记录经纬度的位置        LatLng latLng = null;          OverlayOptions overlayOptions = null;          Marker marker = null;          for (Info info : infos)          {              // 位置              latLng = new LatLng(info.getLatitude(), info.getLongitude());              // 图标              overlayOptions = new MarkerOptions().position(latLng)                      .icon(mMarker).zIndex(5);              /**             * 迭代向地图中添加商家的信息             */            marker = (Marker) (baiduMap.addOverlay(overlayOptions));             //当图标点击时弹出的附加信息            Bundle bundle = new Bundle();              bundle.putSerializable("info", info);              marker.setExtraInfo(bundle);        }          // 将地图移到到最后一个经纬度位置          MapStatusUpdate u = MapStatusUpdateFactory.newLatLng(latLng);          baiduMap.setMapStatus(u);      }

于此,我们可以在百度地图上看见很多的Marker展现在地图上.

然后我们需要处理一下地图Marker的点击事件,来展现我们的InfoWindow上的信息.

/*     * 百度图标的点击事件     */    public void InitMarkClick(){        //设置当点击百度图标的时候,显示响应的文本信息        baiduMap.setOnMarkerClickListener(new OnMarkerClickListener() {            @Override            public boolean onMarkerClick(Marker marker) {                Info info=(Info) marker.getExtraInfo().getSerializable("info");                //信息窗口                InfoWindow  infowindow=null;                //设置信息窗口设置的文字                TextView view=new TextView(getApplicationContext());                view.setBackgroundResource(R.drawable.location_tips);                view.setPadding(30,20, 30,50);                view.setText(info.getName());                //从marker中获取经纬度的信息来转化成屏幕的坐标                LatLng ll=marker.getPosition();                Point p=baiduMap.getProjection().toScreenLocation(ll);                p.y-=47;                LatLng llinfo=baiduMap.getProjection().fromScreenLocation(p);                //生成信息窗口                infowindow=new InfoWindow(view, llinfo, new OnInfoWindowClickListener() {                    @Override                    public void onInfoWindowClick() {                        //隐藏消息窗口                        baiduMap.hideInfoWindow();                    }                });                //将信息窗口显示出来                baiduMap.showInfoWindow(infowindow);                ///将布局显示出来用来显示具体的内容                layout.setVisibility(View.VISIBLE);                //将信息设置进布局文件                popupInfo(layout,info);                return true;            }        });    }

当我们点击Marker上的信息时,会出现底部的相对布局来展现具体的内容.

private void popupInfo(RelativeLayout layout, Info info) {        ViewHolder holder=null;        if(layout.getTag()==null){            holder=new ViewHolder();            holder.info_img=(ImageView) layout.findViewById(R.id.info_img);            holder.info_name=(TextView) layout.findViewById(R.id.info_name);            holder.info_distance=(TextView) layout.findViewById(R.id.info_distance);            holder.zan_count=(TextView) layout.findViewById(R.id.zan_count);            layout.setTag(holder);        }        /*         * 设置数据         */        holder.info_img.setImageResource(info.getImgId());        holder.info_name.setText(info.getName());        holder.info_distance.setText(info.getDistance());        holder.zan_count.setText(info.getZan()+"");    }       class ViewHolder{        public ImageView info_img;        public TextView info_name;        public TextView info_distance;        public TextView zan_count;        }

最后,当我们点击百度地图的时候,将Infowindow消失掉,并且将布局消失掉.

/*     * 百度地图点击事件将InfoWindow隐藏     */    private void InitMapClick() {        baiduMap.setOnMapClickListener(new OnMapClickListener() {            @Override            public boolean onMapPoiClick(MapPoi arg0) {                // TODO Auto-generated method stub                return false;            }            @Override            public void onMapClick(LatLng arg0) {               layout.setVisibility(View.GONE);               baiduMap.hideInfoWindow();            }        });    }

1 0