uniapp 微信小程序实现选择地图位置功能

最近在做商家小程序，就是用于给实体店老板进行网上开店的小程序。
其中有一项功能就是获取商店的位置，要求支持：获取当前定位/检索到指定位置/地图选点等功能，并返回选择地点的regionId和经纬度以及详细的地址等信息。

获取地理信息的授权功能

1. manifest.json中写入授权地理位置的描述

代码如下：

"permission" : {  
 "scope.userLocation" : {    
    "desc" : "您的位置将用于绑定您的区域"  
      }}

2. 点击地图图标时，调用下面的代码实现授权(uni.chooseLocation方式)

注意：调取授权地理位置，需要用到uni的api，下面的三个方法都是可以的。
uni.getLocation uni.chooseLocation uni.openLocation

getMapLocation(){
    uni.chooseLocation({
        success: (res) => {
            console.log(res);
            // this.getRegionFn(res);
        },

        fail: () => {

            // 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息          

            uni.getSetting({

                success: (res) => {
                    console.log(res);
                    var status = res.authSetting;
                    if (!status['scope.userLocation']) {
                        // 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息           
                        uni.showModal({
                            title: "是否授权当前位置",
                            content: "需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
                            success: (tip) => {

                                if (tip.confirm) {
                                    // 如    
                                    uni.openSetting({
                                        success: (data) => {
                                            // 如果用户授权了地理信息在，则提示授权成功                                     
                                            if (data.authSetting['scope.userLocation'] === true) {
                                                uni.showToast({
                                                    title: "授权成功",
                                                    icon: "success",
                                                    duration: 1000
                                                })


                                                // 授权成功后，然后再次chooseLocation获取信息 

                                                uni.chooseLocation({


                                                    success: (res) => {
                                                        console.log("详细地址", res);

                                                        // this.getRegionFn(res);                       
                                                    }

                                                })

                                            } else {

                                                uni.showToast({

                                                    title: "授权失败",

                                                    icon: "none",

                                                    duration: 1000

                                                })

                                            }

                                        }

                                    })

                                }

                            }
                        })
                    }
                },
                fail: (res) => {
                    uni.showToast({

                        title: "调用授权窗口失败",

                        icon: "none",

                        duration: 1000
                    })
                }
            })
        }
    });
}

授权成功后，就可以进入到uniapp自带的选择地点的页面了，可以直接选取/拖动地图选取/搜索地点选取等多种方式实现地点的选择，页面真的是很好看啊。完全长在了我的审美点上。哈哈。

唯一的缺点就是，这个默认使用的腾讯地图，但是腾讯地图检索不是很精确，不如高德。

下面介绍高德地图的使用方式

3. 使用高德地图api调取地图并实现选取地点的功能

代码如下：

getMapLocation0(){
    uni.getLocation({
        type: 'wgs84', success: (res) => {
            if (this.formData2.longitude && this.formData2.latitude) { uni.navigateTo({ url: "/pages/user/map?lng=" + this.formData2.longitude + "&lat=" + this.formData2.latitude }) } else { uni.navigateTo({ url: "/pages/user/map?lng=" + res.longitude + "&lat=" + res.latitude }) }
        }, fail: () => {
            uni.getSetting({
                success: (res) => {
                    console.log(res);
                    var status = res.authSetting; if (!status['scope.userLocation']) {
                        uni.showModal({ title: "是否授权当前位置", content: "需要获取您的地理位置，请确认授权，否则地图功能将无法使用", success: (tip) => { if (tip.confirm) { uni.openSetting({ success: (data) => { if (data.authSetting['scope.userLocation'] === true) { uni.showToast({ title: "授权成功", icon: "success", duration: 1000 })                                              uni.getLocation({ type: 'wgs84', success: (res) => { console.log('当前位置的经度：' + res.longitude); console.log('当前位置的纬度：' + res.latitude); uni.navigateTo({ url: "/pages/user/map?lng=" + res.longitude + "&lat=" + res.latitude }) } }) } else { uni.showToast({ title: "授权失败", icon: "none", duration: 1000 }) } } }) } } })
                    } else { uni.getLocation({ type: 'wgs84', success: (res) => { console.log('当前位置的经度：' + res.longitude); console.log('当前位置的纬度：' + res.latitude); uni.navigateTo({ url: "/pages/user/map?lng=" + res.longitude + "&lat=" + res.latitude }) } }) }
                }, fail: (res) => { uni.showToast({ title: "调用授权窗口失败", icon: "none", duration: 1000 }) }
            })
        }
    })
}

/pages/user/map页面布局及代码如下：

<template>
<view >="content">	
<view >="btns"> 
// 选取地点后的确定和取消按钮
<view @click="back">取消</view>	
<view @click="checkAdd">确定</view>	
<template>