最近做畢設(shè)，需要獲取地點(diǎn)坐標(biāo)，有了地圖地圖，想想怎么來簡單點(diǎn)。

就上網(wǎng)搜了搜（官方有提供地圖選點(diǎn)返回經(jīng)緯度的，但是感覺手指操作不太精準(zhǔn)，就想著換一種）

然后自己寫了個(gè)demo（代碼再后面）

大體思路是在map中心放個(gè)很小的圈圈定位用（map中flex垂直水平居中不太行，用了position: absolute的老方法）

然后使用MapContext.getCenterLocation獲取當(dāng)前地圖中心的經(jīng)緯度

再使用MapContext.addMarkers添加 marker（callout中顯示坐標(biāo)）

這樣一拖動(dòng)地圖就能顯示地圖中心標(biāo)記點(diǎn)及經(jīng)緯度

頑皮一下（addMarkers里忘寫clear: true的后果哈哈哈哈哈哈）

代碼：

<!--pages/map/map.wxml-->
<!-- <text>pages/map/map.wxml</text> -->
<view class="view">
    <map 
        class="view_map"
        id="map" 
        subkey="{{subKey}}"
        latitude="{{latitude}}"
        longitude="{{longitude}}"
        scale="{{scale}}"
        show-location="{{showLocation}}"
        enable-poi="{{enable_poi}}"
        markers="{{markers}}"
        bindregionchange="changeCenterLocation"
    >
? ? ? ? <!-- 自己去iconfont隨便下個(gè)圈圈圖案就行 -->
        <image class="img" src="../../circle.png" mode=""/>
    </map>
</view>

// pages/map/map.js
Page({

    /**
     * 頁面的初始數(shù)據(jù)
     */
    data: {
        windowHeight: 1,
        windowWidth: 1,
        lo: 1,
        la: 1,

        subKey: '自己的key',
        latitude: '緯度',
        longitude: '經(jīng)度',
        scale: 16,
        showLocation: true,
        enable_poi: false,
        markers: [],
    },

    /**
     * 生命周期函數(shù)--監(jiān)聽頁面加載
     */
    onLoad(options) {
        this.mapCtx = wx.createMapContext('map')
? ? ? ? // 沒底圖的就用不上這個(gè)方法
        this.mapCtx.addGroundOverlay({
            id: 0,
            src: "自己的底圖",
            bounds: {
                southwest: { //西南角
                    latitude: 自己寫,
                    longitude: 自己寫,
                },
                northeast: { //東北角
                    latitude: 自己寫,
                    longitude: 自己寫,
                }
            },
            opacity: 0.7,
        })
        var that = this
        wx.getSystemInfo({
            success: function(res){
                that.setData({
                    windowWidth: res.windowWidth,
                    windowHeight: res.windowHeight,
                })
            }
        })
    },

    /**
     * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
     */
    onReady() {
        
    },

    /**
     * 生命周期函數(shù)--監(jiān)聽頁面顯示
     */
    onShow() {
        this.mapCtx = wx.createMapContext('map',this)
    },

    /**
     * 獲取中心點(diǎn)坐標(biāo)
     */
    changeCenterLocation: function () {
        var that =this
        this.mapCtx.getCenterLocation({
            success: function(res){
                console.log(res.longitude)
                console.log(res.latitude)
                that.setData({
                    lo: res.longitude.toFixed(6),
                    la: res.latitude.toFixed(6),    
                })
                that.addMarkers()
            }
        })   
    },

    /**
     * 添加marker點(diǎn)
     */
    addMarkers: function () {
        this.mapCtx.addMarkers({
            markers:[
                {
                    id: 0,
                    latitude: this.data.la,
                    longitude: this.data.lo,
                    callout:{
                        content: " "+this.data.la+"  "+this.data.lo+" ",
                        display: 'ALWAYS',
                    }
                }
            ],
            clear: true,
        })
        console.log(this.data.markers)
    }
})

/* pages/map/map.wxss */
page {
    height: 100%;
    width: 100%;
}

.view {
    height: 100%;
    width: 100%; 
}

.view_map {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img {
    height: 10px;
    width: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

思路：文章來源地址http://www.zghlxwxcb.cn/news/detail-449712.html

https://blog.csdn.net/ITLISHUANG/article/details/89920332
https://blog.csdn.net/u010481239/article/details/83280946
https://blog.csdn.net/qq_22079371/article/details/89177747