扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
公司项目中有地图展示和定位功能,使用uniapp本以为应该很是容易,应该有现成的空间,去插件市场一找,大部分的插件都是针对H5的,对于app端很少,要不就是需要花钱,这才自己动手实现。
成都网站制作、成都网站设计、外贸营销网站建设,成都做网站公司-创新互联已向上千企业提供了,网站设计,网站制作,网络营销等服务!设计与技术结合,多年网站推广经验,合理的价格为您打造企业品质网站。
公司过去的项目使用的是百度地图,所以uniapp也就只能使用百度地图了,但是一看官方文档:就是没有百度地图。
在网上搜了一堆,需要使用使用到自定义基座,才能使用,那就只能通过自定义基座看看效果。
1.首先去 百度地图开发者平台申请
这里主要是对安卓端进行操作(这里的包名和下边创建基座的包名一致)
2.申请后再Hbuilder中manifest.json 中配置
3.制作基座
切记:Android包名一定要和百度地图开发平台中的一致
一、定位
1.创建获取定位的类fun.js
2.主类main.js中引入
3.需要的类中使用
输出结果:
二、地图展示
一开始的时候,我总是试图寻找百度地图是不是对uniapp这个平台有单独的API,但是很可惜没有。在百度地图引入后,直接调用uniapp给的map组件,可以展示出地图,但是很多的属性不支持,也找不到相关的处理文档。没办法,上网查找,大部分的处理方案是通过动态引入百度地图JavaScript API GL框架,进行展示。
这个地方,我们需要在百度地图开发者平台申请web前端的开发的key
1.百度地图开发者控制平台,创建web端应用
2.创建动态引入百度地图的script类map.js
3.使用(这里使用到了renderjs),切记如果需要开文档,查看JavaScript API GL相关文档
4.运行效果
这样地图的定位和地图展示基本就完成了,如果需要更加复杂的功能只能去查看百度的官方文档
先看一下百度地图API缩放级别和比例尺的大小关系。
百度地图API一共分为19级,比例尺分别为:
[1:20米(简称20米,后同),50米,100米,200米,500米,1公里,2公里,5公里,10公里,20公里,25公里,50公里,100公里,200公里,500公里,1000公里,2000公里,5000公里,10000公里]
分别对应:
[19级,18级,17级,16级,15级,14级,13级,12级,11级,10级,9级,8级,7级,6级,5级,4级,3级,2级,1级]
一、基本概念:
(一)、百度地图:
百度地图 Android SDK是一套基于Android 2.1及以上版本设备的应用程序接口。 您可以使用该套 SDK开发适用于Android系统移动设备的地图应用,通过调用地图SDK接口,您可以轻松访问百度地图服务和数据, 构建功能丰富、交互性强的地图类应用程序。
百度地图Android SDK提供的所有服务是免费的,接口使用无次数限制。您需申请密钥(key)后, 才可使用百度地图Android SDK。
(二)、LBS:(Location based Service)基于位置的服务
基于位置的服务,它是通过电信移动运营商的无线电通讯网络(如GSM网、CDMA网)或外部定位方式(如GPS)获取移动终端用户的位置信息(地理坐标,或大地坐标),在地理信息系统(外语缩写:GIS、外语全称:Geographic Information System)平台的支持下,为用户提供相应服务的一种增值业务。
二、百度地图使用步骤:【参照()】
(一)、HelloBaiduMap:
1、第一步:申请百度地图密钥(API_KEY):
2、第二步:在工程里新建libs文件夹,将开发包里的baidumapapi_vX_X_X.jar拷贝到libs根目录下,将libBaiduMapSDK_vX_X_X.so拷贝到libs\armeabi目录下(官网demo里已有这两个文件,如果要集成到自己的工程里,就需要自己添加),拷贝完成后的工程目录如下图所示;
注:liblocSDK3.so和locSDK_3.1.jar为百度定位SDK所使用资源,开发者可根据实际需求自行添加。
3、第三步:在AndroidManifest中添加开发密钥、所需权限等信息;
application
meta-data
android:name="com.baidu.lbsapi.API_KEY"
android:value="P3G69b5s87YG5M31f8A7oyLW"/
/application
uses-permissionandroid:name="android.permission.GET_ACCOUNTS"/
uses-permissionandroid:name="android.permission.USE_CREDENTIALS"/
uses-permissionandroid:name="android.permission.MANAGE_ACCOUNTS"/
uses-permissionandroid:name="android.permission.AUTHENTICATE_ACCOUNTS"/
uses-permissionandroid:name="android.permission.ACCESS_NETWORK_STATE"/
uses-permissionandroid:name="android.permission.INTERNET"/
uses-permissionandroid:name="com.android.launcher.permission.READ_SETTINGS"/
uses-permissionandroid:name="android.permission.CHANGE_WIFI_STATE"/
uses-permissionandroid:name="android.permission.ACCESS_WIFI_STATE"/
uses-permissionandroid:name="android.permission.READ_PHONE_STATE"/
uses-permissionandroid:name="android.permission.WRITE_EXTERNAL_STORAGE"/
uses-permissionandroid:name="android.permission.BROADCAST_STICKY"/
uses-permissionandroid:name="android.permission.WRITE_SETTINGS"/
uses-permissionandroid:name="android.permission.READ_PHONE_STATE"/
4、第四步:在布局文件中添加地图控件:
com.baidu.mapapi.map.MapView
android:id="@+id/mapView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"/
5、第五步:在应用程序创建时初始化 SDK引用的Context 全局变量:
protectedvoid onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 在使用SDK各组件之前初始化context信息,传入ApplicationContext
// 注意该方法要再setContentView方法之前实现
SDKInitializer.initialize(getApplicationContext());
// 装载布局文件
setContentView(R.layout.activity_main);
}
6、第六步:创建地图Activity,管理地图生命周期:
publicclass MainActivity extends Activity {
private MapView mapView;
@Override
protectedvoid onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 在使用SDK各组件之前初始化context信息,传入ApplicationContext
// 注意该方法要再setContentView方法之前实现
SDKInitializer.initialize(getApplicationContext());
// 装载布局文件
setContentView(R.layout.activity_main);
mapView = (MapView) findViewById(R.id.mapView);
}
@Override
protectedvoid onResume() {
super.onResume();
mapView.onResume();
}
@Override
protectedvoid onPause() {
super.onPause();
mapView.onPause();
}
@Override
protectedvoid onDestroy() {
super.onDestroy();
mapView.onDestroy();
}
}
(二)、基础地图:
1、实现基础地图的操作步骤:
布局文件中使用MapView;
初始化SDK,并检查Key的合法性;
SDKInitializer.initialize(getApplicationContext());
checkKEY();
初始化BaiduMap对象;
对MapView进行findViewById();
MapView对象调用getMap(),返回BaiduMap;
设置BaiduMap;
setMapType();
setTrafficEnabled();
(三)、POI搜索:
1、实现POI搜索的操作步骤:
布局文件中使用fragment,用来实现对BaiduMap的加载;
class="com.baidu.mapapi.map.SupportMapFragment"
当前Activity继承于FragementActivity;
初始化SDK,并检查Key的合法性;
SDKInitializer.initialize(getApplicationContext());
checkKEY();
备注:该两句话必须放在setContentView()之前。
初始化BaiduMap对象;
baiduMap = ((SupportMapFragment) getSupportFragmentManager() .findFragmentById(R.id.fragment_poi_map)).getBaiduMap();
初始化PoiSearch对象;
PoiSearch.newInstance();
给PoiSearch对象设置监听器;
setOnGetPoiSearchResultListener(),重写onGetPoiResult()方法;
自定义PoiOverlay类,实现对每个标记的单击监听;
通过onPoiClick()方法,获取每个PoiInfo中的信息。如果这个对象中包含有明细,可以打开一个新页面来展示兴趣点的详细介绍。
在AndroidManifest.xml文件中配置PlaceCaterActivity页面;
该页面是Baidu提供的POI的明细介绍页面。
PoiSearch对象调用searchInBound()、searchInCity() 、 searchNearby()方法实现兴趣点查询。
【总结:】核心步骤:
实例化BaiduMap,PoiSearch对象;
PoiSearch对象设置OnGetPoiSearchResultListener()监听;
PoiSearch对象调用searchInCity()方法触发监听。
(四)、线路规划:
1、实现路线规划的操作步骤:
布局文件中使用MapView,用来实现对BaiduMap的加载;
初始化SDK,并检查Key的合法性;
SDKInitializer.initialize(getApplicationContext());
checkKEY();
初始化MapView;
调用findViewById()
初始化BaiduMap对象;
baiduMap = MapView对象.getMap();
初始化RoutePlanSearch对象;
RoutePlanSearch.newInstance();
给RoutePlanSearch对象设置监听器;
setOnGetRoutePlanResultListener(),重写onGetWalkingRouteResult()、onGetTransitRouteResult()、onGetDrivingRouteResult()方法;
自定义三种RouteOverlay类(WalkingRouteOverlay、TransitRouteOverlay、DrivingRouteOvelray);
调用RoutePlanSearch对象的三种方法(drivingSearch()、transitSearch()、walkingSearch())实现路线规划。
【总结:】核心步骤:
实例化BaiduMap,RoutePlanSearch对象;
RoutePlanSearch对象设置OnGetRoutePlanResultListener监听;
RoutePlanSearch对象调用drivingSearch()、transitSearch()、walkingSearch()方法触发监听。
(五)、公交查询:
1、实现公交查询的操作步骤:
布局文件中使用fragment,用来实现对BaiduMap的加载;
class="com.baidu.mapapi.map.SupportMapFragment"
初始化SDK,并检查Key的合法性;
SDKInitializer.initialize(getApplicationContext());
checkKEY();
当前Activity继承于FragementActivity;
初始化BaiduMap对象;
baiduMap = ((SupportMapFragment) getSupportFragmentManager() .findFragmentById(R.id.fragment_poi_map)).getBaiduMap();
初始化PoiSearch对象/初始化BusLineSearch对象;
PoiSearch.newInstance();
BusLineSearch.newInstance();
给BusLineSearch对象设置监听器;
setOnGetBusLineSearchResultListener(),重写onGetBusLineResult()方法;
给PoiSearch对象设置监听器;
setOnGetPoiSearchResultListener(),重写onGetPoiResult()方法;
在这个监听器中调用BusLineSearch对象的searchBusLine()方法;
给按钮增加单击监听事件,实现PoiSearch对象的searchInBound()、searchInCity() 、 searchNearby()方法实现兴趣点查询。
【总结:】核心步骤:
实例化BaiduMap、PoiSearch对象及BusLineSearch对象;
PoiSearch对象设置OnGetPoiSearchResultListener()监听;BusLineSearch对象设置OnGetBusLineSearchResultListener监听;
在PoiSearch对象的监听回调方法onGetPoiResult()中调用busLineSearch对象的searchBusLine()方法;
PoiSearch对象调用searchInCity()方法触发整个监听。
【备注:】
整体思路:先调用POI查询,在POI查询中的监听器中执行BusLine查询。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流