【实战教程】Uni-App开发：轻松集成高德地图，实现精准位置选点功能

上周接到腾讯客服的电话，说是要收取5万一年的服务费，如果不交，就要停掉我们相关的腾讯地图服务。公司不想交这个钱，就临时决定把项目中的所有腾讯地图改为高德地图（距离项目上线还有3天的时间🙃🙃🙃，当时也没说要收费…）🤢🤮🤮

没得办法又得加班搞了，😫😫😫心累ing…

先来看看效果图吧

(本项目是uni-app + vue3 + pinia + js)

完成代码我会放在文章的最下面

正文开始~

引入高德地图小程序插件

我们需要到高德地图微信小程序插件文档入门指南-微信小程序插件|高德地图API (amap.com)里面下载插件amap-wx.js 文件plugin文件夹或者utils文件夹中。

我们需要稍微修改一下代码否则就会出现下面的问题

在amap-wx.js文件的底部修改一下导出

// module.exports.AMapWX = AMapWX;
export default { AMapWX };

在amap-wx.js文件的上面手动导出一个函数

export function AMapWX(a) {
    this.key = a.key;
    this.requestConfig = { key: a.key, s: 'rsx', platform: 'WXJS', appname: a.key, sdkversion: '1.2.0', logversion: '2.0' };
    this.MeRequestConfig = { key: a.key, serviceName: 'https://restapi.amap.com/rest/me' };
}

如果在开发中还会遇到问题，可以尝试着把amap-wx.js文件中的所有wx.改为uni.(网上的偏方🧑‍⚕️🧑‍⚕️🧑‍⚕️)

初始化地图

申请高德地图key的方法我就不介绍了，网上有很多的，申请完key后，我们在在vue3的onMounted创建高德地图实例，并调用获取地址描述信息的方法

高德地图文档👇👇👇👇👇👇

基础类-参考手册-微信小程序插件 | 高德地图API (amap.com)

<template>
    <view>
        <view class="map_container">
            <map
                :class="['map']"
                :id="'map'"
                :longitude="longitude"
                :latitude="latitude"
                :scale="14"
                :show-location="true"
                :markers="markers"
                @click="handleMarkerTap"></map>
        </view>
    </view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import * as amapFile from '../../plugin/amap-wx.130';

const longitude = ref(null); // 经度
const latitude = ref(null); // 纬度
const markers = ref([]); //
const textData = ref({});
const myAmapFun = ref(null);
const key = ref('自己申请的key'); // 高德地图key
const addressList = ref([]); // 周边列表
const searchAddressList = ref([]); // 搜索返回的周边列表
const activeId = ref(-1); // 当前选中的周边id
const isSearch = ref(false); // 是否搜索状态
const searchKey = ref(''); // 用户搜索的内容

onMounted(() => {
    myAmapFun.value = new amapFile.AMapWX({ key: key.value });
    getRegeo(true);
});

const getRegeo = (isUseResAddress) => {
    let location = null;
    if (longitude.value != null && latitude.value != null) {
        location = longitude.value + ',' + latitude.value;
    }

    myAmapFun.value.getRegeo({
        iconPath: '../../static/marker.png',
        iconWidth: 22,
        iconHeight: 32,
        location: location,
        success: (data) => {
            console.log('成功的数据', data[0].regeocodeData);
            if (isUseResAddress) {
               latitude.value = data[0].latitude;
               longitude.value = data[0].longitude;
           }
            
        },
        fail: function (info) {
            wx.showModal({ title: info.errMsg });
        },
    });
};
// 用户点击地图
const handleMarkerTap = (ev) => {
    console.log('点击标记点触发', ev);
    latitude.value = ev.detail.latitude;
    longitude.value = ev.detail.longitude;
    getRegeo();
};
<style lang="scss" scoped>
.map_container {
    position: relative;
    top: 0;
    bottom: 80px; /* 底部留出的空间 */
    left: 0;
    right: 0;
}
.map {
    width: 100%;
    /* 计算总的高度，减去底部空间，然后取45% */
    height: calc((100vh - 80px) * 0.45);
}
</style>

这样你就可以看到地图组件初始化的界面和取得的相关数据了。

如果项目中出现了这样的报错：

那么你需要到manifest.json文件中找到mp-weixin的增加一些配置

"mp-weixin": {
    "appid": "自己申请的小程序appid",
    "setting": {
        "urlCheck": false
    },
    "permission": {
        "scope.userLocation": {
            "desc": "你的位置信息将用于小程序位置接口的效果展示"
        },
        "scope.userProfile": {
            "desc": "获取用户信息"
        }
    },
    "requiredPrivateInfos": ["chooseLocation", "getLocation"],
    "usingComponents": true,
    "lazyCodeLoading": "requiredComponents",
    "libVersion": "latest"
},

更改后记得重新编译小程序❗❗❗(如果还是没有解决，清空一下微信开发者工具缓存。

根据数据中POI数组渲染周围地址信息

在返回的信息中可以看到pois数组，这个数组就是我们要遍历的显示在下面的数据