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

被窝是圆的

已于 2022-03-26 16:35:34 修改

阅读量6.2k

点赞数 4

文章标签： webview html javascript

于 2022-02-09 11:15:53 首次发布

本文链接：https://blog.csdn.net/m0_61169066/article/details/122837881

版权

本文介绍如何在uniapp中实现地图定位功能，展示如何将当前经纬度显示到界面上。通过html和javascript代码，结合uniapp的数据绑定，实现实时更新位置信息。在manifest.json中进行相应配置，确保地图功能正常工作。

摘要由CSDN通过智能技术生成

实现效果

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

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&#