app uniapp 获取位置_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端如无特殊必要，建议使用高德地图。)，下面是效果图：

最终代码：

{{address}}

export default {

data() {

return {

id: 0, // 使用 marker点击事件 需要填写id

mapWidth:"300rpx",

mapHeight:"1000rpx",

windowWidth:"",

windowHeight:"",

textwidth:"",

textheight:"",

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();//

},

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(e){

},

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-80

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

}]

}

});

},

getadd: function(res) {

var that = this;

that.latitude = res.detail.latitude

that.longitude = res.detail.longitude

that.covers = [

{

latitude: res.detail.latitude,

longitude: res.detail.longitude,

iconPath: '../../static/image/biaoji.png',

width:40,

height:40

}

]

that.$forceUpdate()

func.getLocation(res.detail.longitude,res.detail.latitude,function(result){

that.address =result.data.result.formatted_addresses.recommend

},function(err){

})

that.$forceUpdate();

},

//获取当前位置

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为封装的根据经纬度查询对应的地址的ajax方法

func.getLocation(res.longitude,res.latitude,function(result){

that.address = result.data.result.formatted_addresses.recommend

},function(err){

})

that.$forceUpdate();

},

fail:function(ret){

console.log(JSON.stringify(ret));

}

});

}

}

};

uni-app H5端的实现效果不一样，因为不支持点击地图得到经纬度，详情可查看 uni-app H5端实现移动地图显示当前地图中心位置的坐标和地址