uniapp(安卓端)百度地图的使用

Posted 2023-04-10

参考技术A 公司项目中有地图展示和定位功能，使用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.运行效果

这样地图的定位和地图展示基本就完成了，如果需要更加复杂的功能只能去查看百度的官方文档

uni-app 之地图 map

参考技术A longitude： 经度
latitude： 纬度
scale： 缩放级别，也就是说放大缩下的程度，取值范围是5-18，默认的是16 ，他就是呢值数越大，放大程度越大，看的越细，看村庄的那种
markers： 标记点 就是说你在地图上标记出来的东西
polyline： 路线 可以写两个标记点 然后用路线将他们连接起来
circle： 圆 就是说在地图上画个圈？
controls： 控件 他就是说那 在地图上显示一个控件，但是这个控件并不随着地图移动
include-points： 缩放视野以包含所有的坐标点　这就是说你坐标点很多的时候，缩小时可以看到全部
show-location： 显示带有方向的当前定位点

注意：当时说想做成那种地图上面带有div的 就是说地图上面可以显示门店位置。门店名称的那种，我当时用定位在网页上实现的，但是一到手机上运行的时候，发现显示不出来，后来我仔细看了一下，那个map组件享有最高的优先级，

你用定位之类，根本就实现不了，后来我发现了一个叫<cover-image> 和 <cover-view > 他是可以覆盖在原生组件上的文本视图 但是也有注意点它不支持的css：

position: fixed
opacity
overflow
padding
linebreak
white-space
另外还有： 在APP端它不支持嵌套其他组件，也不支持本身组件的嵌套，app现在<cover-view>只可以不该原生组件video和map， 一定要注意