学习内容来自“慕课网”
本片学习内容接自前四篇基础
安卓开发_慕课网_百度地图
安卓开发_慕课网_百度地图_实现定位
安卓开发_慕课网_百度地图_实现方向传感器
安卓开发_慕课网_百度地图_实现模式转换
请先学习前4篇再学习本篇,因为本篇在前四篇的基础上进行代码的编写
一、新建一个类用来存放数据(距离,点赞数,介绍图等信息)
1 package com.example.map;
2
3 import java.io.Serializable;
4 import java.util.ArrayList;
5 import java.util.List;
6
7 public class Info implements Serializable
8 {
9 private static final long serialVersionUID = -1010711775392052966L;
10 //经纬度
11 private double latitude;
12 private double longitude;
13 //图片id
14 private int imgId;
15 //商家的名称
16 private String name;
17 //距离
18 private String distance;
19 //点赞的数量
20 private int zan;
21
22 public static List<Info> infos = new ArrayList<Info>();
23 //这里的数据都是死的,实际开发中数据都是从服务器中获取的,这里只演示如何添加覆盖物这个效果
24 static
25 {
26 infos.add(new Info(34.242652, 108.971171, R.drawable.a01, "英伦贵族小旅馆",
27 "距离209米", 1456));
28 infos.add(new Info(34.242952, 108.972171, R.drawable.a02, "沙井国际洗浴会所",
29 "距离897米", 456));
30 infos.add(new Info(34.242852, 108.973171, R.drawable.a03, "五环服装城",
31 "距离249米", 1456));
32 infos.add(new Info(34.242152, 108.971971, R.drawable.a04, "老米家泡馍小炒",
33 "距离679米", 1456));
34 }
35 //构造方法
36 public Info(double latitude, double longitude, int imgId, String name,
37 String distance, int zan)
38 {
39 this.latitude = latitude;
40 this.longitude = longitude;
41 this.imgId = imgId;
42 this.name = name;
43 this.distance = distance;
44 this.zan = zan;
45 }
46
47 public double getLatitude()
48 {
49 return latitude;
50 }
51
52 public void setLatitude(double latitude)
53 {
54 this.latitude = latitude;
55 }
56
57 public double getLongitude()
58 {
59 return longitude;
60 }
61
62 public void setLongitude(double longitude)
63 {
64 this.longitude = longitude;
65 }
66
67 public int getImgId()
68 {
69 return imgId;
70 }
71
72 public void setImgId(int imgId)
73 {
74 this.imgId = imgId;
75 }
76
77 public String getName()
78 {
79 return name;
80 }
81
82 public void setName(String name)
83 {
84 this.name = name;
85 }
86
87 public String getDistance()
88 {
89 return distance;
90 }
91
92 public void setDistance(String distance)
93 {
94 this.distance = distance;
95 }
96
97 public int getZan()
98 {
99 return zan;
100 }
101
102 public void setZan(int zan)
103 {
104 this.zan = zan;
105 }
106
107 }
二、添加覆盖物
首先在菜单中增加"添加覆盖物"菜单项
res-menu-main.xml
红色字体部分为新添加的代码部分
1 <menu xmlns:android="http://schemas.android.com/apk/res/android" >
2
3 <item
4 android:id="@+id/id_map_common"
5
6 android:showAsAction="never"
7 android:title="普通地图"/>
8 <item
9 android:id="@+id/id_map_site"
10
11 android:showAsAction="never"
12 android:title="卫星地图"/>
13 <item
14 android:id="@+id/id_map_traffic"
15
16 android:showAsAction="never"
17 android:title="实时交通(off)"/>
18 <item
19 android:id="@+id/id_map_location"
20
21 android:showAsAction="never"
22 android:title="定位我的位置"/>
23 <item
24 android:id="@+id/id_mode_common"
25
26 android:showAsAction="never"
27 android:title="普通模式"/>
28 <item
29 android:id="@+id/id_mode_following"
30
31 android:showAsAction="never"
32 android:title="跟随模式"/>
33 <item
34 android:id="@+id/id_mode_compass"
35
36 android:showAsAction="never"
37 android:title="罗盘模式"/>
38 <item
39 android:id="@+id/id_add_overlay"
40
41 android:showAsAction="never"
42 android:title="添加覆盖物"/>
43
44 </menu>
给菜单项添加响应事件
1 //菜单按钮的响应事件
2 @Override
3 public boolean onOptionsItemSelected(MenuItem item) {
4 // TODO Auto-generated method stub
5 switch (item.getItemId()) {
6 case R.id.id_map_common:
7 mBaiduMap.setMapType(BaiduMap.MAP_TYPE_NORMAL);
8 break;
9 case R.id.id_map_site:
10 mBaiduMap.setMapType(BaiduMap.MAP_TYPE_SATELLITE);
11 break;
12 case R.id.id_map_traffic:
13 if(mBaiduMap.isTrafficEnabled())
14 {
15 mBaiduMap.setTrafficEnabled(false);
16 item.setTitle("实时交通(off)");
17 }
18 else
19 {
20 mBaiduMap.setTrafficEnabled(true);
21 item.setTitle("实时交通(on)");
22 }
23 break;
24 case R.id.id_map_location:
25 //定位最新自己的位置
26 centerToMyLocation();
27 break;
28
29 case R.id.id_mode_common:
30 //设置普通模式
31 mLocationMode = LocationMode.NORMAL;
32 break;
33 case R.id.id_mode_following:
34 //设置跟随模式
35 mLocationMode = LocationMode.FOLLOWING;
36 break;
37 case R.id.id_mode_compass:
38 //设置罗盘模式
39 mLocationMode = LocationMode.COMPASS;
40 break;
41 case R.id.id_add_overlay:
42 //设置添加覆盖物
43 addOverlays(Info.infos);
44 break;
45 default:
46 break;
47 }
48 return super.onOptionsItemSelected(item);
49 }
这是添加覆盖物的方法 ,
1 private void addOverlays(List<Info> infos) {
2 // TODO Auto-generated method stub
3 //添加覆盖物
4 //清楚定位的一些图层
5 mBaiduMap.clear();
6 // 经纬度
7 LatLng latLng = null;
8 Marker marker = null;
9 OverlayOptions options;
10 for (Info info : infos)
11 {
12 // 经纬度
13 latLng = new LatLng(info.getLatitude(), info.getLongitude());
14 // 图标
15 options = new MarkerOptions().position(latLng).icon(mMarker).zIndex(5);//5表示图层的位置,越大越在上面
16 marker = (Marker) mBaiduMap.addOverlay(options);
17 Bundle arg0 = new Bundle();
18 arg0.putSerializable("info", info);
19 marker.setExtraInfo(arg0);
20 }
21 //定位好之后,讲地图定位到最后一个图标的位置
22 MapStatusUpdate msu = MapStatusUpdateFactory.newLatLng(latLng);
23 mBaiduMap.setMapStatus(msu);
24
25 }
效果图:
可以看到,地图上显示了4个覆盖物的坐标,但是这些坐标无法点击
。下面学习实现点击坐标显示相应的信息效果
二、实现覆盖物信息效果
实现建立显示信息的信息框的布局文件
1 <RelativeLayout
2 android:id="@+id/id_maker_ly"
3 android:layout_width="match_parent"
4 android:layout_height="220dp"
5 android:layout_alignParentBottom="true"
6 android:background="#cc4e5a6b"
7 android:clickable="true"
8 android:visibility="gone" >
9
10 <ImageView
11 android:id="@+id/id_info_img"
12 android:layout_width="fill_parent"
13 android:layout_height="150dp"
14 android:layout_marginBottom="10dp"
15 android:layout_marginLeft="12dp"
16 android:layout_marginRight="12dp"
17 android:layout_marginTop="10dp"
18 android:background="@drawable/img_border"
19 android:scaleType="fitXY"
20 android:src="@drawable/a01" >
21 </ImageView>
22
23 <RelativeLayout
24 android:layout_width="fill_parent"
25 android:layout_height="50dp"
26 android:layout_alignParentBottom="true"
27 android:background="@drawable/bg_map_bottom" >
28
29 <LinearLayout
30 android:layout_width="wrap_content"
31 android:layout_height="wrap_content"
32 android:layout_centerVertical="true"
33 android:layout_marginLeft="20dp"
34 android:orientation="vertical" >
35
36 <TextView
37 android:id="@+id/id_info_name"
38 android:layout_width="wrap_content"
39 android:layout_height="wrap_content"
40 android:text="老米家泡馍"
41 android:textColor="#fff5eb" />
42
43 <TextView
44 android:id="@+id/id_info_distance"
45 android:layout_width="wrap_content"
46 android:layout_height="wrap_content"
47 android:text="距离200米"
48 android:textColor="#fff5eb" />
49 </LinearLayout>
50
51 <LinearLayout
52 android:layout_width="wrap_content"
53 android:layout_height="wrap_content"
54 android:layout_alignParentRight="true"
55 android:layout_centerVertical="true"
56 android:layout_marginRight="20dp"
57 android:orientation="horizontal" >
58
59 <ImageView
60 android:layout_width="wrap_content"
61 android:layout_height="wrap_content"
62 android:background="@drawable/map_zan"
63 android:clickable="true" />
64
65 <TextView
66 android:id="@+id/id_info_zan"
67 android:layout_width="wrap_content"
68 android:layout_height="wrap_content"
69 android:layout_gravity="center"
70 android:text="789"
71 android:textColor="#fff5eb" />
72 </LinearLayout>
73 </RelativeLayout>
74 </RelativeLayout>
注意第18行代码
这里还需要建一个.xml文件
在res目录下新建文件夹drawable 在此文件夹下新建img_border.xml
res-drawable-img_border.xml
1 <?xml version="1.0" encoding="utf-8"?>
2 <shape xmlns:android="http://schemas.android.com/apk/res/android" >
3
4 <stroke
5 android:width="2dp"
6 android:color="#AAFFFFFF" />
7
8 <padding
9 android:bottom="2dp"
10 android:left="2dp"
11 android:right="2dp"
12 android:top="2dp" >
13 </padding>
14 </shape>
信息框布局文件就由这两个.xml文件构成了
MainActivity.java
1 package com.example.map;
2
3 import java.util.List;
4
5 import com.baidu.location.BDLocation;
6 import com.baidu.location.BDLocationListener;
7 import com.baidu.location.LocationClient;
8 import com.baidu.location.LocationClientOption;
9 import com.baidu.mapapi.SDKInitializer;
10 import com.baidu.mapapi.map.BaiduMap;
11 import com.baidu.mapapi.map.BaiduMap.OnMapClickListener;
12 import com.baidu.mapapi.map.BaiduMap.OnMarkerClickListener;
13 import com.baidu.mapapi.map.BitmapDescriptor;
14 import com.baidu.mapapi.map.BitmapDescriptorFactory;
15 import com.baidu.mapapi.map.InfoWindow;
16 import com.baidu.mapapi.map.MapPoi;
17 import com.baidu.mapapi.map.MapStatusUpdate;
18 import com.baidu.mapapi.map.MapStatusUpdateFactory;
19 import com.baidu.mapapi.map.MapView;
20 import com.baidu.mapapi.map.Marker;
21 import com.baidu.mapapi.map.MarkerOptions;
22 import com.baidu.mapapi.map.MyLocationConfiguration;
23 import com.baidu.mapapi.map.MyLocationConfiguration.LocationMode;
24 import com.baidu.mapapi.map.MyLocationData;
25 import com.baidu.mapapi.map.OverlayOptions;
26 import com.baidu.mapapi.model.LatLng;
27 import com.example.map.MyOrientationListener.OnOrientationListener;
28 import com.example.map.R;
29
30 import android.location.Location;
31 import android.os.Bundle;
32 import android.app.Activity;
33 import android.content.Context;
34 import android.graphics.Bitmap;
35 import android.graphics.Color;
36 import android.graphics.Point;
37 import android.view.Menu;
38 import android.view.MenuItem;
39 import android.view.View;
40 import android.view.Window;
41 import android.widget.ImageView;
42 import android.widget.RelativeLayout;
43 import android.widget.TextView;
44 import android.widget.Toast;
45
46 public class MainActivity extends Activity {
47
48 private MapView mMapView = null;
49 private BaiduMap mBaiduMap;
50 //简化代码 用于this.context=this;
51 private Context context;
52 //定位相关
53 private LocationClient mLocationClient;
54 private MyLocationListener mLocationListener;
55 //是否第一次定位的标志
56 private boolean isFirstIn = true;
57 //定位经纬度
58 private double mLatitude;
59 private double mLongtitude;
60 //自定义定位图标
61 private BitmapDescriptor mIconLocation;
62 private LocationMode mLocationMode;
63 private MyOrientationListener myOrientationListener;
64 private float mCurrentX;
65 //添加覆盖物
66 private BitmapDescriptor mMarker;
67 //信息框的布局
68 private RelativeLayout mMarkerLy;
69
70
71
72 @Override
73 protected void onCreate(Bundle savedInstanceState) {
74 super.onCreate(savedInstanceState);
75 //在使用SDK各组件之前初始化context信息,传入ApplicationContext
76 //注意该方法要再setContentView方法之前实现
77 SDKInitializer.initialize(getApplicationContext());
78
79 requestWindowFeature(Window.FEATURE_NO_TITLE);
80 setContentView(R.layout.activity_main);
81 this.context = this;
82 initView();
83 //初始化定位
84 initLocation();
85 //初始化覆盖物相关
86 initMarker();
87 mBaiduMap.setOnMarkerClickListener(new OnMarkerClickListener()
88 {
89 @Override
90 public boolean onMarkerClick(Marker marker)
91 {
92 Bundle extraInfo = marker.getExtraInfo();
93 Info info = (Info) extraInfo.getSerializable("info");
94
95 ImageView iv = (ImageView) mMarkerLy.findViewById(R.id.id_info_img);
96 TextView distance = (TextView) mMarkerLy.findViewById(R.id.id_info_distance);
97 TextView name = (TextView) mMarkerLy.findViewById(R.id.id_info_name);
98 TextView zan = (TextView) mMarkerLy.findViewById(R.id.id_info_zan);
99
100 iv.setImageResource(info.getImgId());
101 distance.setText(info.getDistance());
102 name.setText(info.getName());
103 zan.setText(info.getZan() + "");
104
105 mMarkerLy.setVisibility(View.VISIBLE);
106 return true;
107 }
108 });
109 mBaiduMap.setOnMapClickListener(new OnMapClickListener()
110 {
111
112 @Override
113 public boolean onMapPoiClick(MapPoi arg0)
114 {
115 return false;
116 }
117
118 @Override
119 public void onMapClick(LatLng arg0)
120 {
121 mMarkerLy.setVisibility(View.GONE);
122 mBaiduMap.hideInfoWindow();
123 }
124 });
125 }
126
127 private void initMarker() {
128 // TODO Auto-generated method stub
129 //标记图标
130 mMarker = BitmapDescriptorFactory.fromResource(R.drawable.maker);
131 mMarkerLy = (RelativeLayout) findViewById(R.id.id_maker_ly);
132 }
133
134 private void initView() {
135 // TODO Auto-generated method stub
136 mMapView = (MapView) findViewById(R.id.id_bmapView);
137 mBaiduMap = mMapView.getMap();
138 //设置打开时的显示比列 这里显示500m左右
139 MapStatusUpdate msu = MapStatusUpdateFactory.zoomTo(15.0f);
140 mBaiduMap.setMapStatus(msu);
141 }
142 private void initLocation() {
143 // TODO Auto-generated method stub
144 mLocationClient = new LocationClient(this);
145 mLocationListener = new MyLocationListener();
146 mLocationClient.registerLocationListener(mLocationListener);
147 //默认模式为普通型
148 mLocationMode = LocationMode.NORMAL;
149 LocationClientOption option = new LocationClientOption();
150 option.setCoorType("bd09ll");
151 option.setIsNeedAddress(true);
152 option.setOpenGps(true);
153 option.setScanSpan(1000);
154
155 mLocationClient.setLocOption(option);
156
157 // 初始化图标
158 mIconLocation = BitmapDescriptorFactory.fromResource(R.drawable.navi_map_gps_locked);
159 myOrientationListener = new MyOrientationListener(context);
160 myOrientationListener.setOnOrientationListener(new OnOrientationListener()
161 {
162 @Override
163 public void onOrientationChanged(float x)
164 {
165 mCurrentX = x;
166 }
167 });
168 }
169 //activity销毁时百度地图也销毁
170 @Override
171 protected void onDestroy() {
172 super.onDestroy();
173 //在activity执行onDestroy时执行mMapView.onDestroy(),实现地图生命周期管理
174 mMapView.onDestroy();
175 }
176 @Override
177 protected void onStart() {
178 // TODO Auto-generated method stub
179 super.onStart();
180 // 开启定位
181 mBaiduMap.setMyLocationEnabled(true);
182 if (!mLocationClient.isStarted())
183 mLocationClient.start();
184 // 开启方向传感器
185 myOrientationListener.start();
186
187 }
188 @Override
189 protected void onStop() {
190 // TODO Auto-generated method stub
191 super.onStop();
192 // 停止定位
193 mBaiduMap.setMyLocationEnabled(false);
194 mLocationClient.stop();
195 // 停止方向传感器
196 myOrientationListener.stop();
197 }
198 @Override
199 protected void onResume() {
200 super.onResume();
201 //在activity执行onResume时执行mMapView. onResume (),实现地图生命周期管理
202 mMapView.onResume();
203 }
204 @Override
205 protected void onPause() {
206 super.onPause();
207 //在activity执行onPause时执行mMapView. onPause (),实现地图生命周期管理
208 mMapView.onPause();
209 }
210 @Override
211 public boolean onCreateOptionsMenu(Menu menu) {
212 // TODO Auto-generated method stub
213
214 getMenuInflater().inflate(R.menu.main, menu);
215 return true;
216 }
217 //菜单按钮的响应事件
218 @Override
219 public boolean onOptionsItemSelected(MenuItem item) {
220 // TODO Auto-generated method stub
221 switch (item.getItemId()) {
222 case R.id.id_map_common:
223 mBaiduMap.setMapType(BaiduMap.MAP_TYPE_NORMAL);
224 break;
225 case R.id.id_map_site:
226 mBaiduMap.setMapType(BaiduMap.MAP_TYPE_SATELLITE);
227 break;
228 case R.id.id_map_traffic:
229 if(mBaiduMap.isTrafficEnabled())
230 {
231 mBaiduMap.setTrafficEnabled(false);
232 item.setTitle("实时交通(off)");
233 }
234 else
235 {
236 mBaiduMap.setTrafficEnabled(true);
237 item.setTitle("实时交通(on)");
238 }
239 break;
240 case R.id.id_map_location:
241 //定位最新自己的位置
242 centerToMyLocation();
243 break;
244
245 case R.id.id_mode_common:
246 //设置普通模式
247 mLocationMode = LocationMode.NORMAL;
248 break;
249 case R.id.id_mode_following:
250 //设置跟随模式
251 mLocationMode = LocationMode.FOLLOWING;
252 break;
253 case R.id.id_mode_compass:
254 //设置罗盘模式
255 mLocationMode = LocationMode.COMPASS;
256 break;
257 case R.id.id_add_overlay:
258 //设置添加覆盖物
259 addOverlays(Info.infos);
260 break;
261 default:
262 break;
263 }
264 return super.onOptionsItemSelected(item);
265 }
266 private void addOverlays(List<Info> infos) {
267 // TODO Auto-generated method stub
268 //添加覆盖物
269 //清楚定位的一些图层
270 mBaiduMap.clear();
271 // 经纬度
272 LatLng latLng = null;
273 Marker marker = null;
274 OverlayOptions options;
275 for (Info info : infos)
276 {
277 // 经纬度
278 latLng = new LatLng(info.getLatitude(), info.getLongitude());
279 // 图标
280 options = new MarkerOptions().position(latLng).icon(mMarker).zIndex(5);//5表示图层的位置,越大越在上面
281 marker = (Marker) mBaiduMap.addOverlay(options);
282 Bundle arg0 = new Bundle();
283 arg0.putSerializable("info", info);
284 marker.setExtraInfo(arg0);
285 }
286 //定位好之后,讲地图定位到最后一个图标的位置
287 MapStatusUpdate msu = MapStatusUpdateFactory.newLatLng(latLng);
288 mBaiduMap.setMapStatus(msu);
289
290 }
291
292 //进到自己的位置
293 private void centerToMyLocation() {
294 LatLng latLng = new LatLng(mLatitude,mLongtitude);
295
296 MapStatusUpdate msu = MapStatusUpdateFactory.newLatLng(latLng);
297 mBaiduMap.animateMapStatus(msu);
298 }
299 private class MyLocationListener implements BDLocationListener{
300
301 @Override
302 public void onReceiveLocation(BDLocation location) {
303 // TODO Auto-generated method stub
304 MyLocationData data = new MyLocationData.Builder()//
305 .direction(mCurrentX)//
306 .accuracy(location.getRadius())//
307 .latitude(location.getLatitude())//
308 .longitude(location.getLongitude())//
309 .build();
310 mBaiduMap.setMyLocationData(data);
311 // 设置自定义图标
312 MyLocationConfiguration config = new MyLocationConfiguration(mLocationMode, true, mIconLocation);
313 mBaiduMap.setMyLocationConfigeration(config);
314 //获取最新经纬度
315 mLatitude = location.getLatitude();
316 mLongtitude = location.getLongitude();
317 //判断是否第一次定位
318 if (isFirstIn)
319 {
320 //设置经纬度
321 LatLng latLng = new LatLng(location.getLatitude(),location.getLongitude());
322
323 MapStatusUpdate msu = MapStatusUpdateFactory.newLatLng(latLng);
324 mBaiduMap.animateMapStatus(msu);
325 //将是否第一次定位的标志 变为不是第一次定位
326 isFirstIn = false;
327 //显示当前定位的位置
328 Toast.makeText(context, location.getAddrStr(),
329 Toast.LENGTH_SHORT).show();
330 }
331
332 }
333
334 }
335 }
其中红色字体部分为本篇新加代码
对应布局文件
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="match_parent"
4 android:layout_height="match_parent" >
5
6 <com.baidu.mapapi.map.MapView
7 android:id="@+id/id_bmapView"
8 android:layout_width="fill_parent"
9 android:layout_height="fill_parent"
10 android:clickable="true" />
11
12 <RelativeLayout
13 android:id="@+id/id_maker_ly"
14 android:layout_width="match_parent"
15 android:layout_height="220dp"
16 android:layout_alignParentBottom="true"
17 android:background="#cc4e5a6b"
18 android:clickable="true"
19 android:visibility="gone" >
20
21 <ImageView
22 android:id="@+id/id_info_img"
23 android:layout_width="fill_parent"
24 android:layout_height="150dp"
25 android:layout_marginBottom="10dp"
26 android:layout_marginLeft="12dp"
27 android:layout_marginRight="12dp"
28 android:layout_marginTop="10dp"
29 android:background="@drawable/img_border"
30 android:scaleType="fitXY"
31 android:src="@drawable/a01" >
32 </ImageView>
33
34 <RelativeLayout
35 android:layout_width="fill_parent"
36 android:layout_height="50dp"
37 android:layout_alignParentBottom="true"
38 android:background="@drawable/bg_map_bottom" >
39
40 <LinearLayout
41 android:layout_width="wrap_content"
42 android:layout_height="wrap_content"
43 android:layout_centerVertical="true"
44 android:layout_marginLeft="20dp"
45 android:orientation="vertical" >
46
47 <TextView
48 android:id="@+id/id_info_name"
49 android:layout_width="wrap_content"
50 android:layout_height="wrap_content"
51 android:text="老米家泡馍"
52 android:textColor="#fff5eb" />
53
54 <TextView
55 android:id="@+id/id_info_distance"
56 android:layout_width="wrap_content"
57 android:layout_height="wrap_content"
58 android:text="距离200米"
59 android:textColor="#fff5eb" />
60 </LinearLayout>
61
62 <LinearLayout
63 android:layout_width="wrap_content"
64 android:layout_height="wrap_content"
65 android:layout_alignParentRight="true"
66 android:layout_centerVertical="true"
67 android:layout_marginRight="20dp"
68 android:orientation="horizontal" >
69
70 <ImageView
71 android:layout_width="wrap_content"
72 android:layout_height="wrap_content"
73 android:background="@drawable/map_zan"
74 android:clickable="true" />
75
76 <TextView
77 android:id="@+id/id_info_zan"
78 android:layout_width="wrap_content"
79 android:layout_height="wrap_content"
80 android:layout_gravity="center"
81 android:text="789"
82 android:textColor="#fff5eb" />
83 </LinearLayout>
84 </RelativeLayout>
85 </RelativeLayout>
86
87 </RelativeLayout>
效果图:
点击坐标便显示对应的信息,点击几个坐标以外的位置,信息框便会消失