vue3.0+ts使用原生高德地图解决方法

1.引入高德sdk

2.为了防止打包时把高德纳入，我们需要在webpack中配置，这里以vue.config.js为例

3.声明文件，用了typescript，那么就是想运用到它的类型提醒功能，那么必不可少地需要引入高德地图的声明文件，由于官方也没有给出，我们只能根据api文档来自己书写自己需要用到的函数声明，下面是我们项目中大部分会用到的声明，可以在src目录下新建一个types文件夹专门用于存放声明文件：

src/types/Amap.d.ts:

4.找到tsconfig.json文件，配置上声明文件

5.接下来就可以在页面中快乐的使用了

高德SDK提供了定位、地图、导航相关的丰富的接口。本文记载我接入高德SDK过程及遇到的问题，如有任何错误烦请指正。

首先，要申请高德key。参考 https://lbs.amap.com/faq/android/map-sdk/create-project/43112 首先获得SHA1码，如果存在keytool命令失效的情况，可以跳转到keytool.exe所在目录再进行 *** 作。

https://console.amap.com/dev/key/app 填写相关信息，提交，得到高德的key。

首先，配置项目的build.gradle，打包时加入签名文件：

然后，加入高德地图相关依赖：

注意：高德地图不建议同时使用3D和2D地图，如无必要，不要加入2d地图的依赖，否则会产生报错：More than one file was found with OS independent path

由于定位需要用到包括网络、定位以及离线地图缓存需要的存储权限，推荐使用livePermission获取动态权限：

接下来，配置AndroidManifest.xml:

申明权限：

在application标签范围内加入高德key以及高德定位服务：

创建一个MapActivity及对应的xml文件，activity_map当中加入一个高德地图的容器：

在MapActivity当中动态申请存储权限：

mapView初始化：

再在onDestroy、onResume、onPause、onSaveInstanceState当中分别调用mapView的相关方法。

aMap初始化：

至此，已经可以看到地图显示。接下来，进行定位蓝点的初始化：

定位模式有以下八种：

点击右上角的定位按钮，视图的中心移至定位点，并且可以看到定位的蓝色箭头会随着手机方向移动，并且每两秒钟更新位置。移动地图时，视图中心不会因为定位点变化而移动。

在 高德地图-显示定位蓝点 ，可以看到更多个性化设置的内容，包括可以自定义定位蓝点的图标、定位精度圈等。

1)添加高德SDK

(2)配置AndroidManifest文件

(3)创建地图

(4)控件交互

(5)方法交互

(6)地图截图

(7)添加Marker标记 上面我大致分为了7部分，其中第(1)、(2)部分在高德定位的博客中有说，本篇就不再多述。不同的地方就是我们需要添加地图的SDK以及armebi文件：

ok，下面正式进入地图的使用。

(1)创建地图：即在XML中添加即可。

android:id="@+id/mapview"

android:layout_width="match_parent"

android:layout_height="match_parent" />

然后重写Activity的生命周期方法，并在其中调用MapView相对的生命周期方法：

@Override

protected void onCreate() {

mMapView = (MapView) findViewById(R.id.mapview)

mMapView.onCreate(savedInstanceState)//此方法必须重写

if(mMap == null) {

mMap = mMapView.getMap()

}

// 地图模式可选类型：

// MAP_TYPE_NORMAL：普通模式(默认)

// MAP_TYPE_SATELLITE：卫星地图模式

// MAP_TYPE_NIGHT:夜间模式

// mMap.setMapType(AMap.MAP_TYPE_SATELLITE)

}

@Override

protected void onResume() {

super.onResume()

mMapView.onResume()

}

@Override

protected void onPause() {

super.onPause()

mMapView.onPause()

}

@Override

protected void onDestroy() {

super.onDestroy()

mMapView.onDestroy()

}

(2)控件交互：高德允许我们在地图上显示一些交互的控件。

mUiSettings = mMap.getUiSettings()

//控制定位到当前按钮的显示和隐藏

mUiSettings.setMyLocationButtonEnabled(true)

//控制缩放控件的显示和隐藏。

mUiSettings.setZoomControlsEnabled(true)

//控制指南针的显示和隐藏。

mUiSettings.setCompassEnabled(true)

//显示比例尺控件:例如1:10Km

mUiSettings.setScaleControlsEnabled(true)

(3)方法交互：

1.改变地图中心点

CameraUpdate cameraUpdate = CameraUpdateFactory.newCameraPosition(

new CameraPosition(new LatLng(39.977290,116.337000),//新的中心点坐标

18, //新的缩放级别

30, //俯仰角0°~45°(垂直与地图时为0)

0  偏航角 0~360° (正北方为0)

))

改变地图中心点有两种方式：

(1)平滑地移动地图:第二个参数为移动时长

mMap.animateCamera(cameraUpdate, 1000, new AMap.CancelableCallback() {

@Override

public void onFinish() {

}

@Override

public void onCancel() {

}

})

(2)直接应用新的视图

mMap.moveCamera(cameraUpdate)

2.改变地图缩放级别

zoomTo是缩放地图到指定的缩放级别，ZoomIn是缩放地图到当前缩放级别的上一级

mMap.moveCamera(CameraUpdateFactory.zoomTo(17))//将地图的缩放级别调整到17级

(4)地图截取：高德提供了地图截取功能，可以在截取后获取到Bitmap

mMap.getMapScreenShot(new AMap.OnMapScreenShotListener() {

@Override

public void onMapScreenShot(Bitmap bitmap) {

}

@Override

public void onMapScreenShot(Bitmap bitmap, int i) {

SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss")

if(null == bitmap){

return

}

//保存截图

try {

FileOutputStream fos = new FileOutputStream(

Environment.getExternalStorageDirectory() + "/test_"

+ sdf.format(new Date()) + ".png")

boolean b = bitmap.compress(Bitmap.CompressFormat.PNG, 100, fos)

try {

fos.flush()

} catch (IOException e) {

e.printStackTrace()

}

try {

fos.close()

} catch (IOException e) {

e.printStackTrace()

}

StringBuffer buffer = new StringBuffer()

if (b)

buffer.append("截屏成功 ")

else {

buffer.append("截屏失败 ")

}

if (i != 0)

buffer.append("地图渲染完成，截屏无网格")

else {

buffer.append( "地图未渲染完成，截屏有网格")

}

//ToastUtil.show(ScreenShotActivity.this, buffer.toString())

} catch (FileNotFoundException e) {

e.printStackTrace()

}

}

})

(5)添加Marker标记。

LatLng latLng = new LatLng(39.906901,116.397972)

Marker marker = mMap.addMarker(new MarkerOptions()

.draggable(true)//可拖拽

.setFlat(true)//将Marker设置为贴地显示，可以双指下拉看效果

.icon(BitmapDescriptorFactory

.fromResource(R.drawable.ic_location_mark))//Marker图标

.title("marker标记")//标题

.position(latLng))

//显示InfoWindow

if(!marker.isInfoWindowShown()) {

marker.showInfoWindow()

}

//Marker点击事件

mMap.setOnMarkerClickListener(new AMap.OnMarkerClickListener() {

@Override

public boolean onMarkerClick(Marker arg0) {

return false

}

})

---