以下是必须肯定会用到的官方地址

腾讯地图API开发文档：微信小程序JavaScript SDK | 腾讯位置服务 (qq.com)

高德地图API开发文档：开发 | 高德地图API (amap.com)

高德地图小程序配置指南：入门指南-微信小程序插件|高德地图API (amap.com)

小程序后台：微信公众平台 (qq.com)

有了这些地址，那么你就可以根据你的需要选择一个地图进行以下操作

1、首先，确认你要用的地图，然后去官方网站登录后申请成为开发者，完善你的信息(是个人还是公司或其他，按需填写就好)，这样你就可以拿到在uniapp地图配置中需要的key

申请流程在上面的官方链接里都有，我就不一一放图展示了。

腾讯地图申请key流程可以参考此博主：uniapp开发微信小程序使用腾讯地图获取具体位置信息 (rstk.cn)

 2、申请到key后，下一步就是 开通webserviceAPI服务(小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)

腾讯的操作是：控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存

高德地图的操作跟腾讯地图的差不多，都是在自己的应用里

但是有一点要注意！！！

webserviceAPI配置下面的域名白名单一定不要填写，保留为空就对了,这个地方的白名单在小程序后台配置就可以了。否则地图在使用中会报错。

 这里补充以下官方常见问题链接地址

高德地图常见问题地址：常见问题 | 高德地图API (amap.com)

腾讯地图常见问题地址：常见问题 | 腾讯位置服务 (qq.com)

3、下载微信小程序JavaScriptSDK，这个是要引用到项目中的，必须要下载，其实就是js文件，不到40k

腾讯提供了两个SDK版本：1.1和1.2，这里我两个都放链接，个人觉得用最新的就ok了

腾讯JS-SDK-1.1下载地址：https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.1.zip

高德JS插件下载地址：https://a.amap.com/lbs/static/zip/AMapWX_SDK_V1.3.0.zip

下载好后就按官方文档说的，在项目根目录下创建lib文件夹，把你要用的js文件(比如你用的腾讯地图，那就把刚下载的腾讯地图js文件丢进去)丢进去。

如图我用的腾讯地图，那么我就把那两个js文件丢进去就行了，事实上只需要一个，min是压缩过的，不带min的是正常的js文件，用哪个都可以跑本地跟线上发包。

但是高德的压缩文件貌似是有问题的，我引用就报错，用正常的js文件就没事。各位按需要用就好。

4、开发前的准备工作已经好了，那么，就到页面引用Map地图实战了

首先先看看效果图

注意下哈：

　　1、使用腾讯地图或高德地图，获取自身定位用到的uni.getLocation() 配置的type用gcj02比较精准，如果用wgs84，它是根据你的ip返回经纬度，相比于gcj02没有那么精准。何况你都引用js-sdk文件来开发了，不用gcj02定位那不白瞎了吗

　　2、另外，在本地运行，在开发工具上获取到的经纬度都是按市中心的定位，并不是你准确的位置。需要到真机运行才是返回你自己所在位置的准确经纬度。

　　3、uni.getLocation()需要用户授权定位服务，(避免有些用户关闭了定位)，IOS有些用户在设置--应用：微信--位置内关闭了精确位置，不打开的话定位是不精准的。

　　4、微信小程序要进行如下配置

好了，开始上代码！

// Css

// center-point-box 、center-point样式是为了让中心点图片始终居中定位，这样就实现了拖动地图时中心点markers消失的问题，也省了设置中心点markers。

// cover-view-box是定位到我的盒子

.map { 　　position: relative; }

.cover-view-box { 　　position: absolute; 　　top: 500rpx; 　　right: 60rpx; }

.center-point-box { 　　position: absolute; 　　top: 280rpx; 　　right: 50%; }

.center-point { 　　width: 40rpx; 　　height: 60rpx; }

.be-back-myself { 　　width: 60rpx; 　　height: 60rpx; }

var QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js'); var qqmapsdk = new QQMapWX({ 　　key: '腾讯地图key' });

//onReady内写入如下

this.mapContext = uni.createMapContext('map', this)

// methods内写入如下方法

//获取位置信息 async getLocationInfo() { 　　let that = this 　　return new Promise((resolve) => { 　　//位置信息默认数据 　　let location = { 　　　　longitude: 0, 　　　　latitude: 0, 　　　　province: "", 　　　　city: "", 　　　　area: "", 　　　　street: "", 　　　　address: "", 　　}; 　　uni.getLocation({ 　　　　type: "gcj02", 　　　　altitude: true, 　　　　success(res) { 　　　　　　location.longitude = res.longitude 　　　　　　location.latitude = res.latitude // 腾讯地图 　　　　　　that.longitude = location.longitude 　　　　　　that.latitude = location.latitude 　　　　　　qqmapsdk.reverseGeocoder({ 　　　　　　　　location, 　　　　　　　　success(response) { 　　　　　　　　　　let info = response.result; 　　　　　　　　　　location.province = info.address_component.province; 　　　　　　　　　　location.city = info.address_component.city; 　　　　　　　　　　location.area = info.address_component.district; 　　　　　　　　　　location.street = info.address_component.street; 　　　　　　　　　　location.address = info.address; 　　　　　　　　　　resolve(location); 　　　　　　　　} 　　　　　　}) 　　　　} 　　}) }) },