代码如下:
<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)); } }); } } };