uniapp实现地图定位经纬度和地址名称

实现效果

点击选择定位将当前位置渲染至界面

    

  

html代码
                  

					<view class=" display padding20  mtop40 alignitem justifybetween" @click="authVerification">
						<view class="fontsize28 fontbold width300">详细地址：</view>
						<view class="display alignitem" name="dingwei">
							<view class="fontsize28 color999" v-if="address==''">选择定位</view>
							<view class="fontsize28 " v-else>{
  {address}}</view>
							<view class="iconfont icon-dangqiandingwei mleft16 colorgreen"></view>
						</view>
					</view>

data代码

      data() {
                 //位置
                address: "",
                //纬度
                locationLongitude: '',
                //经度
                locationLatitude: '',   
            }
        }

js代码

//选择定位
 

	authVerification() {
				/* 验证用户授权情况 */
				uni.getLocation({
					success: function(res) {
						uni.setStorageSync('currentLocation', res) /* 把获取到的经纬度信息存储起来，方便后用 */

					},
				})
				uni.getSetting({
					success: (res) => {
						if (res.authSetting['scope.userLocation']) {
							/* 用户授权成功时走这里 */
							this.handerChooseLocation()
						} else if (res.authSetting['scope.userLocation'] === undefined) {
							/* 用户未授权时走这里 */
							// this.handleOpenSetting()
						} else {
							/* 用户拒绝了授权后走这里 */
							this.handleOpenSetting()
						}
					}
				})
			},
			// },
			handleOpenSetting() {
				/* 引导用户开启权限 */
				uni.openSetting({
					success: (res) => {
						if (res.authSetting["scope.userLocation"]) {
							this.handerChooseLocation()
						}
					}
				})
			},
			handerChooseLocation() {
				this.dingwei()
			},
	//选择定位
			dingwei() {
				uni.chooseLocation({
					success: res => {
						console.log(res)
						this.address = res.address
						console.log(this.address)
						this.locationLongitude = res.latitude
						this.locationLatitude = res.longitude
					}
				});
			},

配置文件设置地图manifest.json

随手拍界面整体所有代码

<template>
	<view class="paddingbox20 bgwhrite">

		<view class="bgwhrite">
			<form @submit="formSubmit">
				<view class="paddingbox32 bgfff borderradius16">
					<view class=" display padding20 borderbottom alignitem justifybetween">
						<view class="fontsize28 fontbold">联系人：</view>
						<input v-model="minelist.residentName" class="mleft16 alignright fontsize28" name="linkman"
							placeholder="请输入联系人" placeholder-class="fontsize28 color999" />
					</view>
					<view class&#