uniapp小程序利用高德舆图
1.打开微信公众平台https://img-blog.csdnimg.cn/direct/8fe36a1e52594600845cee5a4f4efb44.png
2.扫二维码选择对应的项目-设置-服务内容声明-用户隐私保护指引-更新-按照下面红框里的设置
https://img-blog.csdnimg.cn/direct/ae7d9ddb554e479ba649d97053e975b2.png
3.开发管理-接口设置(根据需求把对应的api开通，留意红框getLocation，上面有些人是表现审核不通过，但是实际上线后又可以用，一直没明白为什么)
https://img-blog.csdnimg.cn/direct/89256d8f55e3479a97aa2b412a061f0e.png
4.找到项目manifest.json文件，按照图中去设置
https://img-blog.csdnimg.cn/direct/69ef89fed70c433a9da3ad389ba10a86.png
5.打开 高德开放平台 | 高德舆图API
选择应用管理-我的应用-创建新应用
https://img-blog.csdnimg.cn/direct/8860450514a94dcf8267422290fa0328.png
6.自定义
https://img-blog.csdnimg.cn/direct/3acfdee7a3dd4827914d47b2eb3d0d2c.png
7.添加key
https://img-blog.csdnimg.cn/direct/0f94ed5b8ffa4172b191c0973a9af8ec.png
8.下载amap-wx.js文件，并拷贝到项目中，随便方法都行，引入时路径不要错，我的习惯是创建一个util文件夹专门存放js文件 相关下载-微信小程序插件 | 高德舆图API
https://img-blog.csdnimg.cn/direct/5970e94e3f4b4204a5d58e2013ba3f93.png
9.在微信公众平台 设置－开发设置 中设置 request 合法域名，将 https://restapi.amap.com 中添加进去
https://img-blog.csdnimg.cn/direct/6f70f272fd4b4022b6cbb4e9c20d3886.png
10.项目中创建一个组件封装舆图
https://img-blog.csdnimg.cn/direct/fd8ccbe88ad84872af0d86e4422d541b.png
11.焦点部门是map标签，用来表现舆图
https://img-blog.csdnimg.cn/direct/78b55f1352c948578dcf00b3d7fdf706.png
12.引入高德舆图api提供的微信小程序接口
<script>
// 引入高德地图api提供的微信小程序的接口
var amapFile = require('../../util/amap-wx.130.js');//如：../../libs/amap-wx.js
// 创建地图
var myAmapFun = new amapFile.AMapWX({key: 'xxx'});
console.log("创建了高德地图");
export default{
data(){
return{
selectIndex:undefined,
selectAddr:{},
searchWords:"",
id: 1, // 使用 marker点击事件 需要填写id
title: 'map',
latitude: uni.getStorageSync('mapData').latitude,
longitude: uni.getStorageSync('mapData').longitude,
markers: [{
latitude: uni.getStorageSync('mapData').latitude,
longitude: uni.getStorageSync('mapData').longitude,
width:'40rpx',
height:'60rpx',
// iconPath: '../../static/tabs/cart-choose.png'
}],
dataTips:[],
fullAddress: {},
checkOne: false,
flagClick: false,
flag: false
}
}, 13.其余的就是根据UI图来写对应的组件，如:搜索栏，搜索列表什么的，具体需要的方法可以参考高德开放平台手册，获取周边啥啥啥的 基础类-参考手册-微信小程序插件 | 高德舆图API
https://img-blog.csdnimg.cn/direct/2388221ad2694bfb839ec4ead5e53181.png
14.对了，wx.getLocation(获取当前位置)这个api发起是开通下，方便用户打开舆图就表现用户当前的位置（留意：肯定是要在需要利用该功能的页面调用，否则官方会判定违法获取隐私，禁用你的功能，本人已踩过坑，当然，也通过申诉解封，在其他文章也有写，可以去参考下）
15.最终结果如下：
https://img-blog.csdnimg.cn/direct/1f9c531b6fff487f8e5c6ad0fef43e26.png
https://img-blog.csdnimg.cn/direct/3fe44fc2b847497792fb70c93ae72f07.png
谢谢阅读！有些没写到的重点地方，还请大神辅导！抱拳！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]