uni-app H5端实现移动地图显示当前地图中心位置的坐标和地址

    uni-app的H5端map组件默认使用的是腾讯地图，首先需要在腾讯申请key，然后在manifest.json的H5配置key。因为uni-app官网已经说明：map组件的@tap点击地图时触发事件仅App-nuve、微信小程序2.9支持返回经纬度。所以，想做出点击地图，将markers显示到点击位置，同时获取经纬度是不行的。所以，代码实现的效果是，移动地图，将markers显示到地图正中间，同时获取经纬度，利用的是@regionchange视野发生变化的事件。效果图如下：


代码如下：

<map id="navmap" :controls="controls" :latitude="latitude" :longitude="longitude" :markers="covers" @controltap="controltapfunc" @regionchange="regionchange" @updated="updatedmap"></map>
<!--显示当前地址-->
<text class="maptext-tex">{{address}}</text>

export default {
    data() {
        return {
            nav_map:'',
            id: 0, //使用 marker点击事件 需要填写id
            windowWidth:"",
            windowHeight:"",
            mapWidth:"",
            mapHeight:"",
            title: 'map',
            latitude: '',
            longitude: '',
            covers: [],
            controls:[{    //在地图上显示控件
                    id:111,//控件id
                    iconPath:'../../static/image/dingwei.png',    //显示的图标    
                    position:{    //控件在地图的位置
                        left:0,
                        top:0,
                        width:60,
                        height:60,
                    },
                    clickable:true
            }],
            address:"",
        };
    },
    onLoad() {
        this.getSystemInfo()
        this.getlocation();
        this.nav_map = uni.createMapContext("navmap",this);
    },
    onNavigationBarButtonTap(e) {
        var that = this
        uni.$emit('address', {  
            address:that.address,
            latitude:that.latitude,
            longitude:that.longitude
        });
        uni.navigateBack({
            delta:1
        })
        
    },
    methods: {
        updatedmap:function(){
        },
        //地图视野改变时触发
        regionchange:function(){
            const that = this;
            that.nav_map.getCenterLocation({
                success(e) {
                    that.latitude = e.latitude
                    that.longitude = e.longitude
                    that.covers = [
                       {
                          latitude: that.latitude,
                          longitude: that.longitude,
                          iconPath: '../../static/image/biaoji.png',
                          width:40,
                          height:40
                       }
                    ]
                    func.getLocation(that.longitude,that.latitude,function(result){
                        that.address =result.data.result.formatted_addresses.recommend
                    },function(err){
                        console.log("err: " + JSON.stringify(err));
                    })
                }
            })
        },
        controltapfunc:function(e){
            this.getlocation();
        },
        getSystemInfo:function(){
            var that = this
            uni.getSystemInfo({
                success: function (res) {
                    that.windowWidth=res.windowWidth
                    that.windowHeight=res.windowHeight
                    that.mapWidth = that.windowWidth
                    that.mapHeight = that.windowHeight-150
                    that.textwidth = that.windowWidth
                    that.textheight = that.windowHeight-that.mapHeight
                    that.controls = [{//在地图上显示控件，控件不随着地图移动
                            id:111,//控件id
                            iconPath:'../../static/image/dingwei.png',//显示的图标    
                            position:{//控件在地图的位置
                                left:that.mapWidth-70,
                                top:that.mapHeight-70,
                                width:60,
                                height:60
                            },
                            clickable:true
                    }]
                }
            });
        },
        //获取当前位置
        getlocation: function() {
            var that = this;
            uni.getLocation({
                type: 'gcj02',
                success: function(res) {
                    that.latitude = res.latitude;
                    that.longitude = res.longitude;
                    that.covers = [
                       {
                          latitude: res.latitude,
                          longitude: res.longitude,
                          iconPath: '../../static/image/biaoji.png',
                          width:40,
                          height:40
                       }
                    ]
                    //func.getLocation为自己封装的网络请求，可以根据经纬度解析出地址等
                    func.getLocation(res.longitude,res.latitude,function(result){
                        console.log("result: " + JSON.stringify(result));
                        that.address = result.data.result.formatted_addresses.recommend
                    },function(err){
                        console.log("err: " + JSON.stringify(err));
                    })
                    console.log("that.covers: " + JSON.stringify(that.covers));
                    that.$forceUpdate();
                },
                fail:function(ret){
                    console.log(JSON.stringify(ret));
                }
            });
        }
    }
};

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！