小程序map拖动地图显示地图中心标记点及经纬度方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序map拖动地图显示地图中心标记点及经纬度方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近做毕设，需要获取地点坐标，有了地图地图，想想怎么来简单点。

就上网搜了搜（官方有提供地图选点返回经纬度的，但是感觉手指操作不太精准，就想着换一种）

然后自己写了个demo（代码再后面）

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

然后使用MapContext.getCenterLocation获取当前地图中心的经纬度

再使用MapContext.addMarkers添加 marker（callout中显示坐标）

这样一拖动地图就能显示地图中心标记点及经纬度

顽皮一下（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随便下个圈圈图案就行 -->
        <image class="img" src="../../circle.png" mode=""/>
    </map>
</view>

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

    /**
     * 页面的初始数据
     */
    data: {
        windowHeight: 1,
        windowWidth: 1,
        lo: 1,
        la: 1,

        subKey: '自己的key',
        latitude: '纬度',
        longitude: '经度',
        scale: 16,
        showLocation: true,
        enable_poi: false,
        markers: [],
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.mapCtx = wx.createMapContext('map')
        // 没底图的就用不上这个方法
        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,
                })
            }
        })
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
        
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        this.mapCtx = wx.createMapContext('map',this)
    },

    /**
     * 获取中心点坐标
     */
    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点
     */
    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%);
}

思路：文章来源地址https://www.toymoban.com/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

到了这里，关于小程序map拖动地图显示地图中心标记点及经纬度方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！