0
点赞
收藏
分享

微信扫一扫

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位


​​上一篇:Android 天气APP(二十三)增加灾害预警、优化主页面UI​​

文章目录

  • ​​前言​​
  • ​​正文​​
  • ​​一、修改应用配置​​
  • ​​二、地图显示​​
  • ​​三、定位到当前所在位置​​
  • ​​四、点击地图定位​​
  • ​​五、回到当前位置并清除标点​​
  • ​​六、根据经纬度获取实际的定位信息​​

前言

之前也看过和风天气自己做的APP,主页面的地图点击之后,定位到某一个点,然后查看这个地方的天气,实际思路还是通过区县来查询天气的,只不过,加上了地图就比较的直观,看起来也会觉得很上档次,所以我也决定做一个这样的功能。

这篇文章实现的效果图如下:

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_点击定位

正文

说到地图就想到了百度地图,当然你要是想用高德地图也是可以的,对接就可以了,我这里就不介绍了,还记得在第一篇文章的时候,就注册了百度地图开放平台的账号,并且申请了应用的key用于定位,点击​​百度地图开放平台​​进入。登录账号之后进入控制台,找到之前的那个应用,我的当然是GoodWeather,你们的要看自己的名字,

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_地图自动定位_02


如果你是第一次看我的文章呢,可以先看看第一篇简单了解一下我是在做什么。

地址链接:​​Android 天气APP(一)开发准备​​

一、修改应用配置

还记得吗?我之前只选择了定位这个功能,点击设置进入配置页面

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_android_03


这是之前配置的。

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_android_04


如下图所示勾选,然后提交

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_地图自动定位_05

提交之后就不用管了,点击开发文档选择Android地图SDK

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_数据_06


然后点击自定义下载

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_xml_07


按照下图进行选择,然后选择标准开发包,下载

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_xml_08

点击开发包然后开始下载,下载好之后解压文件。目录如下

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_android_09

选中这7个文件,粘贴到你的项目中libs下面,这时候你的项目会报错,因为缺少依赖的jar包,所以要Sync,等待完成之后你的jar可以打开的时候,你的项目就不会报错了。

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_android_10

然后BuildClean Project 清除掉一些之前的配置

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_xml_11


现在运行一下,确保不影响我们之前的代码。

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_点击定位_12


OK,很明显没问题,那么就开始操作吧。

二、地图显示

首先打开你的Application,在onCreate中放入地图SDK初始化的代码

//在使用SDK各组件之前初始化context信息,传入ApplicationContext
SDKInitializer.initialize(this);

//自4.3.0起,百度地图SDK所有接口均支持百度坐标和国测局坐标,用此方法设置您使用的坐标类型.
//包括BD09LL和GCJ02两种坐标,默认是BD09LL坐标。
SDKInitializer.setCoordType(CoordType.BD09LL);

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_点击定位_13


然后就可以来显示地图了,以我的性格,那肯定是新建一个页面来做这个的。在ui包下新建一个MapWeatherActivity,然后修改布局activity_map_weather.xml 代码如下:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.MapWeatherActivity">

<!--地图控件-->
<com.baidu.mapapi.map.MapView
android:clickable="true"
android:id="@+id/map_view"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"/>


</FrameLayout>

地图有了,然后就是做沉浸式效果,打开MapWeatherActivity,修改代码如下:

package com.llw.goodweather.ui;

import android.os.Bundle;

import com.baidu.mapapi.map.MapView;
import com.llw.goodweather.R;
import com.llw.goodweather.utils.StatusBarUtil;
import com.llw.mvplibrary.base.BaseActivity;

import butterknife.BindView;
import butterknife.ButterKnife;

/**
* 地图天气
*/
public class MapWeatherActivity extends BaseActivity {

@BindView(R.id.map_view)
MapView mapView;//地图控件

@Override
public void initData(Bundle savedInstanceState) {
StatusBarUtil.transparencyBar(context);//透明状态栏
StatusBarUtil.StatusBarLightMode(context);//状态栏黑色字体
}

@Override
public int getLayoutId() {
return R.layout.activity_map_weather;
}

}

可以看到这里继承了BaseActiivty,实现里面的两个构造方法,然后通过注解的方式绑定地图控件,在页面初始化initData()的时候修改状态栏的背景和字体颜色。在getLayoutId()中指定布局。

那么这里就先告一段落了,因为我是新建的页面,所以我需要到主页面MainActivity中找一个地方去进入这个地图页面MapWeatherActivity。就选择左上角了。

修改activity_main.xml中的布局

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_xml_14


Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_android_15


icon_map.png,尺寸是48*48,白色的所以你看不见,不过依然可以保存

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_xml_16

推荐一个图标网站,我APP上的图标基本都是在这个上面找的,真心不错。
​​​iconfont​​

这个地图的图标也是在上面找的。可以看到右边已经有一个更多功能的按钮了,我在左边加一个地图的。图标作为按钮,右边的图标我也做了一些修改,看上面的图进行改动,触摸时会有一个半透明的背景,这个drawable代码如下:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape>
<solid android:color="#22000000"/>
<corners android:radius="@dimen/dp_25"/>
</shape>
</item>

<item>
<shape>
<solid android:color="#00000000"/>
</shape>
</item>
</selector>

然后进入到MainActivity中

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_地图自动定位_17


点击跳转

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_xml_18


OK,运行看一下效果吧。说实话这个GIF大小上限5M真的很坑爹,最坑爹是我的GIF命名4.83M,结果还是告诉我超过限制,没有办法只能降低GIF的清晰度了。

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_xml_19


可以看到不是很清晰,但是我也没办法呀。地图确实已经看到了,但是为什么是在北京呢?因为这是默认的初始位置,所以需要自己去定位到当前位置。

三、定位到当前所在位置

首先在MapWeatherActivity中增加一个定位的监听方法,实现BDLocationListener,代码如下:

private LocationClient mLocationClient;//定位
private BaiduMap mBaiduMap;//百度地图

/**
* 定位SDK监听,
*/
private class MyLocationListener implements BDLocationListener {

/**
* 监听返回数据 MapView 销毁后不在处理新接收的位置
* @param bdLocation 定位信息
*/
@Override
public void onReceiveLocation(BDLocation bdLocation) {
if (bdLocation == null || mapView == null) {//做null处理,避免APP崩溃
return;
}

MyLocationData locationData = new MyLocationData.Builder()//定位构造器
.accuracy(bdLocation.getRadius())//设置定位数据的精度信息,单位:米
.direction(bdLocation.getDirection())//设置定位数据的方向信息
.latitude(bdLocation.getLatitude())//设置定位数据的纬度
.longitude(bdLocation.getLongitude())//设置定位数据的经度
.build();//构建生成定位数据对象
mBaiduMap.setMyLocationData(locationData);//设置定位数据,只有开启定位图层之后才会生效

//创建一个经纬度构造对象,传入定位返回的经纬度,Latitude是纬度,Longitude是经度,一对经纬度值代表地球上一个地点。
LatLng latLng = new LatLng(bdLocation.getLatitude(),bdLocation.getLongitude());

MapStatus.Builder builder = new MapStatus.Builder()//创建地图状态构造器
.target(latLng)//设置地图中心点,传入经纬度对象
.zoom(13.0f);//设置地图缩放级别 13 表示 比例尺/2000米 2公里

//改变地图状态,使用地图状态更新工厂中的新地图状态方法,传入状态构造器
mBaiduMap.animateMapStatus(MapStatusUpdateFactory.newMapStatus(builder.build()));
}
}

注释都是代码里,应该够清楚了吧,官方接入文档都没有我这个清楚。
然后再写一个初始化定位的方法。

/**
* 初始化定位
*/
private void initLocation() {
mBaiduMap.setMyLocationEnabled(true);//开启定位图层
mLocationClient = new LocationClient(context);//定位初始化

MyLocationListener listener = new MyLocationListener();//创建定位监听器
mLocationClient.registerLocationListener(listener);//注册定位监听,否则监听无效

LocationClientOption option = new LocationClientOption();//创建定位设置
option.setOpenGps(true);//打开GPS
option.setCoorType("bd09ll");//设置坐标类型 可以设置BD09LL和GCJ02两种坐标
option.setScanSpan(0);//设置扫描间隔,单位是毫秒,0 则表示只定位一次,设置毫秒不能低于1000,也就是1秒

mLocationClient.setLocOption(option);//传入定位设置
mLocationClient.start();//开始定位

}

在这个方法中,对定位做了监听和设置,然后启动定位。

最后只要在initData方法中调用就可以了。

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_数据_20


最后就是关于Activity的生命周期要对地图做相应的处理。代码如下:

@Override
protected void onResume() {
super.onResume();
mapView.onResume();//生命周期管理
}

@Override
protected void onPause() {
super.onPause();
mapView.onPause();//生命周期管理
}

@Override
protected void onDestroy() {
super.onDestroy();
mLocationClient.stop();// 退出时销毁定位
mBaiduMap.setMyLocationEnabled(false);// 关闭定位图层
mapView.onDestroy();// 在activity执行onDestroy时必须调用mMapView.onDestroy()
}

然后就可以运行了,运行看看吧。

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_点击定位


可以看到定位还是蛮准的,定位时间取决于你的网速。当然如果你想要地址显示的更精确一些的话,可以修改

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_地图自动定位_22


可以参照这个表来进行设置

显示层级

比例尺/米

比例尺/公里

4

1000000

1000

5

500000

500

6

200000

200

7

100000

100

8

50000

50

9

25000

25

10

20000

20

11

10000

10

12

5000

5

13

2000

2

14

1000

1

15

500

0.5

16

200

0.2

17

100

0.1

18

50

0.05

19

20

0.02

20

10

0.01

21

5

0.005

比如说我设置成4层级的

zoom(4.0f)

运行一下:

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_地图自动定位_23


根据自己的需求来就行了。所以我设置的是13,大概就能看清楚附近的区/县就可以了,因为和风天气API请求的最低单位就是区/县。

四、点击地图定位

当然光是一个当前定位是不足以满足用户的,用户一般是都是想点那里就点那里,你点了没反应就是你的软件有问题,然后直接给你卸载,你哭都没地方哭去。下面来看看具体实现吧。

先声明需要的变量

private Marker marker;//标点也可以说是覆盖物
private BitmapDescriptor bitmap;//标点的图标
private double markerLatitude = 0;//标点纬度
private double markerLongitude = 0;//标点经度
private double latitude;//定位纬度
private double longitude;//定位经度

刚才都说了是点击地图定位,那么肯定就需要一个点击事件对吧。当然这个事件肯定不是常规的View.OnClickListener,而是百度地图已经封装好的点击方法。

/**
* 初始化地图点击
*/
private void initMapOnClick() {
mBaiduMap.setOnMapClickListener(new BaiduMap.OnMapClickListener() {
//地图内 Poi 单击事件回调函数 那么poi是什么呢?你可以当做兴趣点,
// 比如我想知道我当前所在地有那些餐厅,那么餐厅就是poi,
// 而你点击这个poi就会拿到详情的信息数据,当然不在我的业务需求之内,所以只做解释
@Override
public void onMapPoiClick(MapPoi mapPoi) {

}

//地图单击事件回调函数
@Override
public void onMapClick(LatLng latLng) {

}
});
}

这里添加一个标点marker的图标

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_android_24


可以看到要实现两个构造方法,而我只需要在onMapClick下处理点击之后的业务逻辑就可以了。

//地图单击事件回调函数
@Override
public void onMapClick(LatLng latLng) {
bitmap = BitmapDescriptorFactory.fromResource(R.mipmap.icon_marka);// 设置marker图标
//通过LatLng获取经纬度
markerLatitude = latLng.latitude;//获取纬度
markerLongitude = latLng.longitude;//获取经度
mBaiduMap.clear();//清除之前的图层

MarkerOptions options = new MarkerOptions()//创建标点marker设置对象
.position(latLng)//设置标点的定位
.icon(bitmap);//设置标点图标

marker = (Marker) mBaiduMap.addOverlay(options);//在地图上显示标点
//点击地图之后重新定位
initLocation();
}

当点击地图时,或者经纬度,然后清除当前的图层,再配置标点的坐标和图标,然后添加到地图上,这时候重新定位一下,定位到标点的这个地方,所以要在监听的回调里面中修改原来的代码

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_数据_25


在拿到定位监听到之后首先判断是自动定位,还是点击地图定位。因为如果你点了地图,那么markerLatitude就不会是为0的,因为我在点击地图的时候给markerLatitude赋了值,作为判断条件区分你是自动还是手动。然后赋值给一个全局的经纬度变量,再把这个变量放到定位数据里,再设置成地图中心坐标,最后渲染出来,就可以做到,我点那里就定位到哪里了,指哪打哪。OK,没有效果图那就是扯淡,运行一下:

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_地图自动定位_26


效果还是不错滴!但是我又想回到原来的位置呢?

Wath!!!!

五、回到当前位置并清除标点

先来说一下实现的业务逻辑,当我一进入这个页面时,是自动定位的,这是要隐藏自动定位按钮,当我点击定位按钮时,清除标点回到当前定位地址。这个按钮我打算用浮动按钮来做,因为它隐藏和显示的时候会自带动画效果,相当不错。
在build.gradle中添加,有就不用了,然后Sync,否则你找不到这个控件。

implementation 'com.google.android.material:material:1.0.0'

简单修改activity_map_weather.xml

<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/btn_auto_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginLeft="@dimen/dp_50"
android:layout_marginBottom="@dimen/dp_10"
android:clickable="true"
android:src="@mipmap/icon_auto_location"
app:backgroundTint="@color/transparent_bg_3"
app:backgroundTintMode="screen"
app:borderWidth="@dimen/dp_0"
app:fabSize="mini"
app:hoveredFocusedTranslationZ="@dimen/dp_18"
app:pressedTranslationZ="@dimen/dp_18"
app:rippleColor="@color/blue_one"

这个按钮会显示在页面的左下角比例尺的左边。

icon_auto_location.png如下,其他的参数都是常规数据,背景颜色尺寸一些都是可以自己写的。

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_地图自动定位_27


然后回到MapWeatherActivity

@BindView(R.id.btn_auto_location)
FloatingActionButton btnAutoLocation;//重新定位按钮

然后在点击的时候重置标点的经纬度参数值,清除标点,再重新定位

/**
* 点击事件
*/
@OnClick(R.id.btn_auto_location)
public void onViewClicked() {
markerLatitude = 0;
markerLongitude = 0;
marker.remove();//清除标点
initLocation();
}

在定位成功的回调中对定位按钮进行显示和隐藏的控制。

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_xml_28


然后在新建一个initView方法,放入进入页面的一些基本配置。

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_xml_29

OK,运行一下。

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_地图自动定位_30

六、根据经纬度获取实际的定位信息

我们已经拿到经纬度信息了,那么这个信息需要转换为实际的位置,否则别人也不知道你定位在哪里,那就没有什么意义了。
先声明地址解析

private GeoCoder geoCoder;//百度地址解析

然后创建一个地址解析结果监听器

/**
* 编码结果监听
*/
private OnGetGeoCoderResultListener onGetGeoCoderResultListener = new OnGetGeoCoderResultListener() {
/**
* 编码结果返回 就是通过具体位置信息获取坐标
* @param geoCodeResult 编码返回结果
*/
@Override
public void onGetGeoCodeResult(GeoCodeResult geoCodeResult) {

}

/**
* 反编码结果返回 就是通过坐标获取具体位置信息
* @param reverseGeoCodeResult 反编码返回结果
*/
@Override
public void onGetReverseGeoCodeResult(ReverseGeoCodeResult reverseGeoCodeResult) {
if (reverseGeoCodeResult == null
|| reverseGeoCodeResult.error != SearchResult.ERRORNO.NO_ERROR) {
// 没有检测到结果
return;
}
ReverseGeoCodeResult.AddressComponent addressDetail = reverseGeoCodeResult.getAddressDetail();
//需要的地址信息就在AddressComponent 里
ToastUtils.showShortToast(context,"地址信息:"+addressDetail.province+addressDetail.city+addressDetail.district+addressDetail.street);
Log.d("dataStr",addressDetail.province+addressDetail.city+addressDetail.district+addressDetail.street);

}
};

然后在initView中赋值和添加监听

geoCoder = GeoCoder.newInstance();//赋值
geoCoder.setOnGetGeoCodeResultListener(onGetGeoCoderResultListener);//反编码结果监听

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_android_31


最后就是在定位监听返回时获得坐标时,进行反编译

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_地图自动定位_32


运行一下:

Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位_数据_33


OK,现在已经拿到相应的省市县数据了,那么就可以进行天气的数据渲染和请求了。请看下一篇文章

源码地址:​​GoodWeather​​ 欢迎 StarFork

​​下一篇:Android 天气APP(二十五)地图天气(下)嵌套滑动布局渲染天气数据​​


举报

相关推荐

0 条评论