我爱模板网 > 建站教程 > APP开发,混合APP >  uni-app APP端实现点击获取经纬度、地址,并显示markers正文

uni-app APP端实现点击获取经纬度、地址,并显示markers

    uni-app的APP端实现的点击获取map经纬度和地址,并在点击的地方显示markers。这里要注意,在打包成正式的app,需要申请安卓和IOS高德appkey。并且将manigfest.json->App模块配置->Maps->高德地图勾选,同时填写对应的appkey_ios和appkey_android (这里推荐使用高德地图,因为App为高德地图,app-nvue只支持高德地图。另外选择地图、查看地图位置的API也仅支持高德地图。App端如无特殊必要,建议使用高德地图。),下面是效果图:



最终代码:
1<map :style="[{width:mapWidth,height: mapHeight}]" :controls="controls" :latitude="latitude" :longitude="longitude" :markers="covers" @tap="getadd" @controltap="controltapfunc" @regionchange="regionchange" @updated="updatedmap"></map>
2<text class="maptext-tex" :style="[{height: textheight,lineHeight:textheight}]">{{address}}</text>
001export default {
002    data() {
003        return {
004            id: 0, // 使用 marker点击事件 需要填写id
005            mapWidth:"300rpx",
006            mapHeight:"1000rpx",
007            windowWidth:"",
008            windowHeight:"",
009            textwidth:"",
010            textheight:"",
011            title: 'map',
012            latitude: '',
013            longitude: '',
014            covers: [],
015            controls:[{//在地图上显示控件,控件不随着地图移动
016                    id:111,//控件id
017                    iconPath:'../../static/image/dingwei.png',//显示的图标   
018                    position:{//控件在地图的位置
019                        left:0,
020                        top:0,
021                        width:60,
022                        height:60,
023                    },
024                    clickable:true
025            }],
026            address:"",
027        };
028    },
029    onLoad() {
030        this.getSystemInfo()
031        this.getlocation();//
032    },
033    onNavigationBarButtonTap(e) {
034        var that = this
035        uni.$emit('address', { 
036            address:that.address,
037            latitude:that.latitude,
038            longitude:that.longitude
039        });
040        uni.navigateBack({
041            delta:1
042        })
043         
044    },
045    methods: {
046        updatedmap:function(){
047        },
048        regionchange:function(e){
049        },
050        controltapfunc:function(e){
051            this.getlocation();
052        },
053        getSystemInfo:function(){
054            var that = this
055            uni.getSystemInfo({
056                success: function (res) {
057                    that.windowWidth=res.windowWidth
058                    that.windowHeight=res.windowHeight
059                    that.mapWidth = that.windowWidth
060                    that.mapHeight = that.windowHeight-80
061                    that.textwidth = that.windowWidth
062                    that.textheight = that.windowHeight-that.mapHeight
063                    that.controls = [{//在地图上显示控件,控件不随着地图移动
064                        id:111,//控件id
065                        iconPath:'../../static/image/dingwei.png',//显示的图标   
066                        position:{//控件在地图的位置
067                            left:that.mapWidth-70,
068                            top:that.mapHeight-70,
069                            width:60,
070                            height:60
071                        },
072                        clickable:true
073                    }]
074                }
075            });
076        },
077        getadd: function(res) {
078            var that = this;
079            that.latitude = res.detail.latitude
080            that.longitude = res.detail.longitude
081            that.covers = [
082               {
083                  latitude: res.detail.latitude,
084                  longitude: res.detail.longitude,
085                  iconPath: '../../static/image/biaoji.png',
086                  width:40,
087                  height:40
088               }
089            ]
090            that.$forceUpdate()
091            func.getLocation(res.detail.longitude,res.detail.latitude,function(result){
092                that.address =result.data.result.formatted_addresses.recommend
093            },function(err){
094            })
095            that.$forceUpdate();
096        },
097        //获取当前位置
098        getlocation: function() {
099            var that = this;
100            uni.getLocation({
101                type: 'gcj02',
102                success: function(res) {
103                    that.latitude = res.latitude;
104                    that.longitude = res.longitude;
105                    that.covers = [
106                       {
107                          latitude: res.latitude,
108                          longitude: res.longitude,
109                          iconPath: '../../static/image/biaoji.png',
110                          width:40,
111                          height:40
112                       }
113                    ]
114                    //func.getLocation为封装的根据经纬度查询对应的地址的ajax方法
115                    func.getLocation(res.longitude,res.latitude,function(result){
116                        that.address = result.data.result.formatted_addresses.recommend
117                    },function(err){
118                    })
119                    that.$forceUpdate();
120                },
121                fail:function(ret){
122                    console.log(JSON.stringify(ret));
123                }
124            });
125        }
126    }
127};
uni-app H5端的实现效果不一样,因为不支持点击地图得到经纬度,详情可查看 uni-app H5端实现移动地图显示当前地图中心位置的坐标和地址


部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:uni-app H5端实现移动地图显示当前地图中心位置的坐标和地址 下一篇:Flutter Setup: Running pub upgrade.. Flutter Setup:Building
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢