h5调用地图功能

Posted 2023-04-13

参考技术A

<a href="https://uri.amap.com/marker?position=经度,纬度&name=所在的位置名称">高德地图</a>
<a href="http://api.map.baidu.com/marker?location=纬度,经度&title=所在位置名称&content=所在位置的简介（可选）&output=html">百度地图</a>

注意: 高德地图和百度地图的经纬度传值是相反着的

Android中调用百度地图

一、调用百度地图 --第一种方法

1、下载百度地图SDK

SDK可以拆分下载，需要使用那一部分功能就下载相应包含的SDK，如下图

核心的的jar 和so包，放在工程中的libs目录下

2、申请key

注册百度账号申请key，格式如下：sha1值+";"+包名。

包名指的是AndroidManifest.xml 中定义的名称 ，并非工程包名

3、将百度地图加入工程

（1）在application中添加开发密钥

<application   <meta-data

android:name="com.baidu.lbsapi.API_KEY"

android:value="申请的key" />

</application>

（2）添加所需权限

<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />

<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />

<uses-permission android:name="android.permission.GET_TASKS" />

<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS" >

</uses-permission>

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />

（3）添加百度地图服务

在mainfest的application标签中配置地图服务

<service

android:name="com.baidu.location.f"

android:enabled="true"

android:process=":remote" >

</service>

（4）在布局xml文件中添加地图控件

（5）在应用程序创建时初始化 SDK引用的Context 全局变量

     public class MainActivity extends Activity {     MapView mMapView = null;     @Override   protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //在使用SDK各组件之前初始化context信息，传入ApplicationContext   //注意该方法要再setContentView方法之前实现          SDKInitializer.initialize(getApplicationContext());         setContentView(R.layout.activity_main); //获取地图控件引用          mMapView = (MapView) findViewById(R.id.bmapView); }     @Override   protected void onDestroy() { super.onDestroy(); //在activity执行onDestroy时执行mMapView.onDestroy()，实现地图生命周期管理          mMapView.onDestroy(); }     @Override   protected void onResume() { super.onResume(); //在activity执行onResume时执行mMapView. onResume ()，实现地图生命周期管理          mMapView.onResume(); }     @Override   protected void onPause() { super.onPause(); //在activity执行onPause时执行mMapView. onPause ()，实现地图生命周期管理          mMapView.onPause(); } }

运行后就可以拿到百度地图图层

4、定位当前位置

1、开启定位图层

// 开启定位图层

mBaiduMap.setMyLocationEnabled(true);

2、开启定位功能

mLocClient = new LocationClient(context);

mLocClient.registerLocationListener(myListener);

LocationClientOption option = new LocationClientOption();

option.setOpenGps(true);// 打开gps

option.setCoorType("bd09ll"); // 设置坐标类型

option.setScanSpan(1000);

mLocClient.setLocOption(option);

mLocClient.start();

    3、重写监听器

继承BDLocationListener监听器，重写onReceiveLocation方法，这样就可以拿到包含在BDLocation中的定位信息，具体参看BDLocation类

4、定位当前位置

/**

* 设置地图操作点中心

*/

public void setCenterPosition(Point p){

LatLng ll = new LatLng(Double.parseDouble(p.getX()),

Double.parseDouble(p.getY()));

MapStatusUpdate u = MapStatusUpdateFactory.newMapStatus(new                        MapStatus.Builder().target(ll).build());

//mBaiduMap.setMapStatus(u);

//已动画的方式切换

mBaiduMap.animateMapStatus(u);

}

利用工厂类，更新地图状态，显示当前位置。

5、利用百度地图标绘

在百度地图上标绘基本图形，可查看相关API文档。

在本项目中，标绘了圆、线、点。（OverlayOptions 接口类，一般利用其子类绘制）

1、标绘线

OverlayOptions ooPolyline = new PolylineOptions().width(width)

.color(color).points(points);

mBaiduMap.addOverlay(ooPolyline);

2、标绘圆

LatLng llCircle = new LatLng(Double.parseDouble(centerPoint.getX()),

Double.parseDouble(centerPoint.getY()));

OverlayOptions ooCircle = new CircleOptions().fillColor(fillColor)

.center(llCircle).stroke(new Stroke(5, color))

.radius(rad);

mBaiduMap.addOverlay(ooCircle);

3、标绘点（并非基本方法）

LatLng ll = new LatLng(Double.parseDouble(centerPoint.getX()),

Double.parseDouble(centerPoint.getY()));

OverlayOptions ooA = new MarkerOptions().position(ll).icon(bd)

.zIndex(9);

return (Marker) mBaiduMap.addOverlay(ooA);

 

 

二、申请AK（API Key）--第二种方法

    要想使用百度地图sdk，就必须申请一个百度地图的api key。申请流程挺简单的。

    首先注册成为百度的开发者，然后打开http://lbsyun.baidu.com/apiconsole/key这个网址，添加应用：

    创建应用最重要的一步是【安全码】。安全码是有【数字签名】和【;】和【包名】组成。包名就是你所创建的项目的包的结构，是指AndroidManifest.xml中的manifest标签下的package的值。

    数字签名指Android的签名证书的SHA1值。

    获取数字签名有两种方法：

    1. 第一种方法：使用eclipse查看。

    打开eclipse的preferences菜单，在Android下的【Build】中可以看到SHA1的值，如下图：

    2. 第二种方法：使用keytool工具（jdk自带）查看。

    在控制台下，输入【cd .android】，然后输入【keytool -list -v -keystore debug.keystore】回车，然后提示你输入【秘钥库口令】，输入【android】回车然后就会显示SHA1的值。

数字签名搞定了，然后创建应用就ok了。创建完成之后，应用列表中会显示相应的AK，也就是api key。

二、下载SDK开发包

    打开http://developer.baidu.com/map/index.php?title=androidsdk/sdkandev-download网址下载sdk，可以全部下载，也可以自定义下载。从V2.3.0之后的版本，SDK的开发包以可定制的形式提供下载，用户可以根据自己的项目需要勾选相应的功能下载对应的SDK开发包。

三、在android项目中引用百度SDK

    1. 将开发包中的jar包和so文件添加到libs文件下。

    2. 在AndroidManifest.xml中添加开发秘钥和所需权限。

[java] view plain copy

1. <application  
2.         android:allowBackup="true"
3.         android:icon="@drawable/ic_launcher"
4.         android:label="@string/app_name"
5.         android:theme="@style/AppTheme" >  
6.         <meta-data  
7.             android:name="com.baidu.lbsapi.API_KEY"
8.             android:value="填写你申请的AK" /> 

权限：

[java] view plain copy

1. <!-- 百度API所需权限 -->  
2.     <uses-permission android:name="android.permission.GET_ACCOUNTS" />  
3.     <uses-permission android:name="android.permission.USE_CREDENTIALS" />  
4.     <uses-permission android:name="android.permission.MANAGE_ACCOUNTS" />  
5.     <uses-permission android:name="android.permission.AUTHENTICATE_ACCOUNTS" />  
6.     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />  
7.     <uses-permission android:name="android.permission.INTERNET" />  
8.     <uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" />  
9.     <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />  
10.     <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />  
11.     <uses-permission android:name="android.permission.READ_PHONE_STATE" />  
12.     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />  
13.     <uses-permission android:name="android.permission.BROADCAST_STICKY" />  
14.     <uses-permission android:name="android.permission.WRITE_SETTINGS" />  
15.     <uses-permission android:name="android.permission.READ_PHONE_STATE" /> 

3. 在布局文件中添加地图控件：

[java] view plain copy

1. <com.baidu.mapapi.map.MapView  
2.         android:id="@+id/bmapview"
3.         android:layout_width="match_parent"
4.         android:layout_height="match_parent"
5.         android:clickable="true" /> 

4. 在应用程序创建时初始化SDK引用的Context全局变量。

[java] view plain copy

1. @Override
2. protected void onCreate(Bundle savedInstanceState) {  
3. super.onCreate(savedInstanceState);  
4.     requestWindowFeature(Window.FEATURE_NO_TITLE);  
5. //
6.     SDKInitializer.initialize(getApplicationContext());  
7.     setContentView(R.layout.activity_main);  
8.     init();  
9. } 

这里需要注意一下：initialize方法中必须传入的是ApplicationContext，传入this，或者MAinActivity.this都不行，不然会报运行时异常，所以百度建议把该方法放到Application的初始化方法中。

     然后重写activity的生命周期的几个方法来管理地图的生命周期。在activity的onResume、onPause、onDestory方法中分别执行mapview的onReusme、onPause、onDestory方法。

[java] view plain copy

1. package com.bdmap.view;  
2. import com.baidu.mapapi.SDKInitializer;  
3. import com.baidu.mapapi.map.BaiduMap;  
4. import com.baidu.mapapi.map.MapView;  
5. import android.app.Activity;  
6. import android.os.Bundle;  
7. import android.view.View;  
8. import android.view.Window;  
9. public class MainActivity extends Activity {  
10. // 百度地图控件
11. private MapView mMapView = null;  
12. // 百度地图对象
13. private BaiduMap bdMap;  
14. @Override
15. protected void onCreate(Bundle savedInstanceState) {  
16. super.onCreate(savedInstanceState);  
17.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
18. //
19.         SDKInitializer.initialize(getApplicationContext());  
20.         setContentView(R.layout.activity_main);  
21.         init();  
22.     }  
23. /**
24.      * 初始化方法
25.      */
26. private void init() {  
27.         mMapView = (MapView) findViewById(R.id.bmapview);  
28.     }  
29. @Override
30. protected void onResume() {  
31. super.onResume();  
32.         mMapView.onResume();  
33.     }  
34. @Override
35. protected void onPause() {  
36. super.onPause();  
37.         mMapView.onPause();  
38.     }  
39. @Override
40. protected void onDestroy() {  
41.         mMapView.onDestroy();  
42.         mMapView = null;  
43. super.onDestroy();  
44.     }  
45. } 

完成以上步骤，此时就可以完成一个简单的”Hello Map“程序了。

三、普通地图和卫星地图切换

   百度地图将地图的类型分为两种：普通矢量地图和卫星图。

[java] view plain copy

1. mMapView = (MapView) findViewById(R.id.bmapView);    
2. mBaiduMap = mMapView.getMap();    
3. //普通地图  
4. mBaiduMap.setMapType(BaiduMap.MAP_TYPE_NORMAL);    
5. //卫星地图  
6. mBaiduMap.setMapType(BaiduMap.MAP_TYPE_SATELLITE); 

四、显示实时交通图（路况图）

[java] view plain copy

1. //开启交通图   
2. mBaiduMap.setTrafficEnabled(true); 

五、显示热力图

    热力图就是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示。通俗来说就是显示地图上某一块区域的人的密集程度。类似于下图所示：

[java] view plain copy

1. //开启热力图   
2. mBaiduMap.setBaiduHeatMapEnabled(true);