23. “我”模块(二)之地图
上一节对欢迎模块进行了综述(可参见 “我”模块(一) 进行了解),接下来将从“我”模块(二)开始详细介绍:
- [“我”模块(二)之日历]
- [“我”模块(二)之星座]
- [“我”模块(二)之星座选择]
- [“我”模块(二)之涂鸦]
- [“我”模块(二)之地图]
知识点
- 掌握“日历”界面的开发,使用日历展示当前年份
- 掌握“星座”界面的开发,选择不同的星座展示不同的运势
- 掌握“涂鸦”界面的开发,实现图画的绘制功能
- 掌握“地图”界面的开发,可以定位一个指定地点
地图
任务综述:
“地图”界面主要默认设置一个固定的经纬度,然后在地图上显示该经纬度的位置,并调用Marker围绕该定位不断地循环移动。
“地图”界面
任务分析:
“地图”界面主要展示了一个地图定位,一个蓝色的mark图标会围绕该定位不断地循环移动。
任务实施:
(1)创建“地图”界面:MapActivity & activity_map。
(2)导入界面图片(marker)。
(3)添加Android_3DMap_V2.4.0.jar库。将其复制到Project/app/libs文件夹。右击选择Add As Library选项,弹出一个对话框,选择把该jar包放在app的项目中即可。
(4)添加libamapv304.so与libamapv304ex.so库。由于添加的百度地图需要兼容不同的手机,需要在src/main创建jniLibs文件夹,在该文件夹分别创建x86_64、armeabi-v7a、x86、arm64-v8a、armeabi文件夹,然后把libamapv304.so与libamapv304ex.so这两个so文件分别放在这5个文件夹中,并在build.gradle文件中添加如下代码:
//添加so文件需要配置的
task nativeLibsToJar(type:Zip,description:
"create a jar archive of the native libs"){
destinationDir file("$projectDir/libs")
baseName "Native_Libs2"
extensions "jar"
from fileTree (dir:"libs",include: "**/*.so" )
into "lib"
}
tasks.withType(JavaCompile){
compileTask ->compileTask.dependsOn(nativeLibsToJar)
}
(5)放置界面控件。在该布局文件中,放置一个MapView控件用于显示地图,具体代码如文件所示。
activity_map.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/main_title_bar" />
<com.amap.api.maps.MapView
android:id="@+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>
18. “地图”界面逻辑代码**
任务分析:
“地图”界面主要是根据已知的经纬度设置地图的定位,然后设置marker的倾斜度,根据倾斜度沿着定位地点慢慢地循环移动。
任务实施:
(1)获取界面控件。在MapActivity中创建界面控件的初始化方法init(),用于获取地图界面所要用到的控件。
(2)设置Marker循环的相关数据。在MapActivity中创建initRoadData()方法,用于设置Marker围绕着定位地点循环移动的相关数据。
(3)根据点获取图标转的角度与循环移动。在MapActivity中创建getAngle()方法、moveLooper()方法。分别用于根据点获取图标转的角度与循环移动的逻辑过程。
MapActivity.java
public class MapActivity extends AppCompatActivity {
private MapView mMapView;
private AMap mAmap;
private Polyline mVirtureRoad;
private Marker mMoveMarker;
//通过设置间隔时间和距离可以控制速度和图标移动的距离
private static final int TIME_INTERVAL = 80;
private static final double DISTANCE = 0.0001;
private TextView tv_main_title, tv_back;
private RelativeLayout rl_title_bar;
private SwipeBackLayout layout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
layout = (SwipeBackLayout) LayoutInflater.from(this).inflate(
R.layout.base, null);
layout.attachToActivity(this);
setContentView(R.layout.activity_map);
mMapView = (MapView) findViewById(R.id.map);
mMapView.onCreate(savedInstanceState);
mAmap = mMapView.getMap();
init();
initRoadData();
moveLooper();
}
private void init() {
tv_main_title = (TextView) findViewById(R.id.tv_main_title);
tv_main_title.setText("地图");
rl_title_bar = (RelativeLayout) findViewById(R.id.title_bar);
rl_title_bar.setBackgroundColor(getResources().getColor(R.color.
rdTextColorPress));
tv_back = (TextView) findViewById(R.id.tv_back);
tv_back.setVisibility(View.VISIBLE);
tv_back.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
MapActivity.this.finish();
}
});
}
private void initRoadData() {
double centerLatitude = 39.916049;
double centerLontitude = 116.399792;
double deltaAngle = Math.PI / 180 * 5;
double radius = 0.02;
PolylineOptions polylineOptions = new PolylineOptions();
for (double i = 0; i < Math.PI * 2; i = i + deltaAngle) {
float latitude = (float) (-Math.cos(i) * radius + centerLatitude);
float longtitude = (float) (Math.sin(i) * radius + centerLontitude);
polylineOptions.add(new LatLng(latitude, longtitude));
if (i > Math.PI) {
deltaAngle = Math.PI / 180 * 30;
}
}
float latitude = (float) (-Math.cos(0) * radius + centerLatitude);
float longtitude = (float) (Math.sin(0) * radius + centerLontitude);
polylineOptions.add(new LatLng(latitude, longtitude));
polylineOptions.width(10);
polylineOptions.color(Color.RED);
mVirtureRoad = mAmap.addPolyline(polylineOptions);
MarkerOptions markerOptions = new MarkerOptions();
markerOptions.setFlat(true);
markerOptions.anchor(0.5f, 0.5f);
markerOptions.icon(BitmapDescriptorFactory.fromResource(R.drawable.marker));
markerOptions.position(polylineOptions.getPoints().get(0));
mMoveMarker = mAmap.addMarker(markerOptions);
mMoveMarker.setRotateAngle((float) getAngle(0));
}
/**
* 根据点获取图标转的角度
*/
private double getAngle(int startIndex) {
if ((startIndex + 1) >= mVirtureRoad.getPoints().size()) {
throw new RuntimeException("index out of bonds");
}
LatLng startPoint = mVirtureRoad.getPoints().get(startIndex);
LatLng endPoint = mVirtureRoad.getPoints().get(startIndex + 1);
return getAngle(startPoint, endPoint);
}
/**
* 根据两点算取图标转的角度
*/
private double getAngle(LatLng fromPoint, LatLng toPoint) {
double slope = getSlope(fromPoint, toPoint);
if (slope == Double.MAX_VALUE) {
if (toPoint.latitude > fromPoint.latitude) {
return 0;
} else {
return 180;
}
}
float deltAngle = 0;
if ((toPoint.latitude - fromPoint.latitude) * slope < 0) {
deltAngle = 180;
}
double radio = Math.atan(slope);
double angle = 180 * (radio / Math.PI) + deltAngle - 90;
return angle;
}
/**
* 根据点和斜率算取截距
*/
private double getInterception(double slope, LatLng point) {
double interception = point.latitude - slope * point.longitude;
return interception;
}
/**
* 算斜率
*/
private double getSlope(LatLng fromPoint, LatLng toPoint) {
if (toPoint.longitude == fromPoint.longitude) {
return Double.MAX_VALUE;
}
double slope = ((toPoint.latitude - fromPoint.latitude) / (toPoint.longitude -
fromPoint.longitude));
return slope;
}
@Override
protected void onResume() {
super.onResume();
mMapView.onResume();
}
@Override
protected void onPause() {
super.onPause();
mMapView.onPause();
}
@Override
protected void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
mMapView.onSaveInstanceState(outState);
}
@Override
protected void onDestroy() {
super.onDestroy();
mMapView.onDestroy();
}
/**
* 计算x方向每次移动的距离
*/
private double getXMoveDistance(double slope) {
if (slope == Double.MAX_VALUE) {
return DISTANCE;
}
return Math.abs((DISTANCE * slope) / Math.sqrt(1 + slope * slope));
}
/**
* 循环进行移动逻辑
*/
public void moveLooper() {
new Thread() {
public void run() {
while (true) {
for (int i = 0; i < mVirtureRoad.getPoints().size() - 1; i++) {
LatLng startPoint = mVirtureRoad.getPoints().get(i);
LatLng endPoint = mVirtureRoad.getPoints().get(i + 1);
mMoveMarker.setPosition(startPoint);
mMoveMarker.setRotateAngle((float) getAngle(startPoint,
endPoint));
double slope = getSlope(startPoint, endPoint);
//是不是正向的标示(向上设为正向)
boolean isReverse = (startPoint.latitude > endPoint.latitude);
double intercept = getInterception(slope, startPoint);
double xMoveDistance = isReverse ? getXMoveDistance(slope)
: -1 * getXMoveDistance(slope);
for (double j = startPoint.latitude;
!((j > endPoint.latitude) ^ isReverse);
j = j - xMoveDistance) {
LatLng latLng = null;
if (slope != Double.MAX_VALUE) {
latLng = new LatLng(j, (j - intercept) / slope);
} else {
latLng = new LatLng(j, startPoint.longitude);
}
mMoveMarker.setPosition(latLng);
try {
Thread.sleep(TIME_INTERVAL);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}
}
}.start();
}
}
(4)修改清单文件。由于“地图”界面向右滑动会关闭该界面,因此需要给该界面添加透明主题的样式。
<activity
android:name=".activity.MapActivity"
android:theme="@style/AppTheme.TransparentActivity" />
根据百度地图的官方文档提示,在清单文件的<application>节点中需要添加代码:
<meta-data
android:name="com.amap.api.v2.apikey"
android:value="86e5eedc821be0edd51fa307a5da15d3" />
需要注意的是,该地图功能无须申请百度地图密钥,但建议用户申请一个。
(5)修改“我”界面逻辑代码。由于点击“我”界面上的地图图标时会跳转到“地图”界面,因此需要在MeFragment中找到onClick()方法,在该方法中的“case R.id.ll_map:”语句下方添加如下代码:
case R.id.ll_map:
Intent mapIntent = new Intent(getActivity(), MapActivity.class);
startActivity(mapIntent);