准备：使用了高德地图，所以需要前往高德开放平台申请appkey（安卓，iOS各一个）。申请过程不做介绍。

1.首先打开配置文件中的maps模块

image.png

2.其次配置高德appkey

image.png

3.开发

3.1 准备素材

图片：

Location.png

新建页面：

image.png

3.2 开发

页面模板中放入地图组件：

      <view>
        <view class="page-body">
            <view class="page-section page-section-gap">
                <map id="midMap" style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude">
                    <cover-image class="coverIcon" src="/static/img/Location.png"></cover-image>
                </map>
            </view>
            <button class="confirmBtn" @click="getCenter()">确 定</button>
        </view>
    </view>

脚本中定义页面内全局变量地图对象：

<script>
    var appMap = null;
    // ...
</script>

页面onReady时获取地图对象：

                onReady(options) {
            console.log("onReady");
            appMap = uni.createMapContext("midMap", this).$getAppMap();
            appMap.showUserLocation(true);
        },

上面用到的api，可查看uniapp接口文档--createmapcontext

获取中心点经纬度并反编码：

        // methods中添加函数：
        getCenter: function() {
                var _that = this;
                appMap.getCurrentCenter(
                    function(state, point) {
                        if (0 == state) {
                            // 反编码
                            var point = new plus.maps.Point(point["longitude"], point["latitude"]);
                            plus.maps.Map.reverseGeocode(point, {}, function(event) {
                                var address = event.address; // 转换后的地理位置
                                var coord = event.coord; // 转换后的坐标信息
                                var coordType = event.coordType; // 转换后的坐标系类型
                                console.log("Address:" + address);
                                console.log("coord", coord);
                                uni.showModal({
                                    title: "提示",
                                    content: "确定:" + address + "?",
                                    success: function(res) {
                                        if (res.confirm) {
                                            // 业务逻辑...
                                        } else if (res.cancel) {
                                        }
                                    }
                                })
                            }, function(e) {
                                // console.log("Failed:" + JSON.stringify(e));
                                uni.showToast({
                                    title: '反编码失败' + JSON.stringify(e)
                                });
                            });
                        } else {
                            uni.showToast({
                                icon: "none",
                                title: "获取经纬度失败!" + state
                            })
                        }
                    }
                );
            }

有关上面用到的api，可查看5+app的接口文档--maps

可尝试拨动地图位置，改变地图中心点位置。点击确定：

image.png