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

时间:2022-07-25
本文章向大家介绍Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

文章目录

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

前言

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

正文

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

一、修改应用配置

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

这是之前配置的。

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

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

然后点击自定义下载

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

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

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

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

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

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

二、地图显示

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

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

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

然后就可以来显示地图了,以我的性格,那肯定是新建一个页面来做这个的。在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中的布局

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

推荐一个图标网站,我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中

点击跳转

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

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

三、定位到当前所在位置

首先在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方法中调用就可以了。

最后就是关于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()
    }

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

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

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

显示层级

比例尺/米

比例尺/公里

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)

运行一下:

根据自己的需求来就行了。所以我设置的是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的图标

可以看到要实现两个构造方法,而我只需要在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();
    }

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

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

效果还是不错滴!但是我又想回到原来的位置呢? 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如下,其他的参数都是常规数据,背景颜色尺寸一些都是可以自己写的。

然后回到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();
    }

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

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

OK,运行一下。

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

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

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);//反编码结果监听

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

运行一下:

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