準(zhǔn)備：使用了高德地圖斧吐，所以需要前往高德開放平臺(tái)申請(qǐng)appkey（安卓，iOS各一個(gè)）仲器。申請(qǐng)過程不做介紹煤率。

1.首先打開配置文件中的maps模塊

image.png

2.其次配置高德appkey

image.png

3.開發(fā)

3.1 準(zhǔn)備素材

圖片：

Location.png

新建頁面：

image.png

3.2 開發(fā)

頁面模板中放入地圖組件：

      <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>

腳本中定義頁面內(nèi)全局變量地圖對(duì)象：

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

頁面onReady時(shí)獲取地圖對(duì)象：

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

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

獲取中心點(diǎn)經(jīng)緯度并反編碼：

        // methods中添加函數(shù)：
        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; // 轉(zhuǎn)換后的地理位置
                                var coord = event.coord; // 轉(zhuǎn)換后的坐標(biāo)信息
                                var coordType = event.coordType; // 轉(zhuǎn)換后的坐標(biāo)系類型
                                console.log("Address:" + address);
                                console.log("coord", coord);
                                uni.showModal({
                                    title: "提示",
                                    content: "確定:" + address + "?",
                                    success: function(res) {
                                        if (res.confirm) {
                                            // 業(yè)務(wù)邏輯...
                                        } else if (res.cancel) {
                                        }
                                    }
                                })
                            }, function(e) {
                                // console.log("Failed:" + JSON.stringify(e));
                                uni.showToast({
                                    title: '反編碼失敗' + JSON.stringify(e)
                                });
                            });
                        } else {
                            uni.showToast({
                                icon: "none",
                                title: "獲取經(jīng)緯度失敗!" + state
                            })
                        }
                    }
                );
            }

有關(guān)上面用到的api，可查看5+app的接口文檔--maps

可嘗試撥動(dòng)地圖位置鹃彻，改變地圖中心點(diǎn)位置。點(diǎn)擊確定：

image.png