• uniapp app端使用谷歌地图选点定位

    国内需要vpn 和申请谷歌地图的Maps JavaScript API 类型的 key,指引链接这里不详细介绍

    一 、我们得通过webview 跳转谷歌地图 ,需要创建一个webview页面,里面跳转承载谷歌地图的html页面,如果是放在本地的话 html文件须遵守规范 放在 “项目根目录下->hybrid->html->google-map.html” 或static目录下
    image.png

    //跳转谷歌地图前页面,比如选择地址 
<template>
	<view @click="onSkip('/pages/mapWeb')">
		即将前往选择地址
	</view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		onLoad(e) {
			//接收webview传值,能拿到经纬度 详细地址等信息
			uni.$on('googleMsg', (data) => {
				console.log('接收到值,继续业务处理', data)
			});
		},
		methods: {
			//跳转webview
			onSkip(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    //webview 页面  ,如果谷歌地图不是放本地 src 放线上路径即可
<template>
	<view>
		<web-view style="width: 100vw;height: 100vh;" src="../hybrid/html/google-map.html"
			@message="postMessageFun"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {	}
		},
		methods: {
//监听html返回的数据
			postMessageFun(e) {
				console.log(e.detail.data[0], "77777")
			uni.$emit("googleMsg", e.detail.data[0])
			}
		}
	}
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    //google-map.html 页面
<!DOCTYPE html>
<html style="width: 100vw;height: 100vh;">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script src="https://maps.googleapis.com/maps/api/js?key=你的谷歌地图key&sensor=false">
		</script>
     //引入uniapp webview才能接收到数据 监听到事件
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
		</script>
		<script>
			function onBack(data) {
				var timer = setInterval(function() {
					if (window.uni) {
						clearInterval(timer);
						uni.postMessage({
								data: data
							}),
							console.log("谷歌地图返回:",data)
							uni.navigateBack()
					}
				}, 10)

			}
			// 谷歌地址解析
			function reverseGeocode(lat, lng) {
				var geocoder = new google.maps.Geocoder();
				var latlng = new google.maps.LatLng(lat, lng);
				// 调用地理编码服务的geocode方法
				geocoder.geocode({
					'location': latlng
				}, (results, status) => {
					if (status === 'OK') {
						if (results[0]) {
							const obj = {
								address: results[0].formatted_address,
								lat: lat,
								lng: lng
							}
							console.log(results)
							// console.log('地址：', obj);
							onBack(obj)
						} else {
							console.log('未找到地址');
						}
					} else {
						console.log('逆地理编码失败：' + status);
					}
				});
			}

			function initialize() {
				function success(position) {
					console.log(position)
					var latitude = position.coords.latitude;
					var longitude = position.coords.longitude;
					var yourmap = {
						center: new google.maps.LatLng(latitude, longitude),
						zoom: 11,
						mapTypeId: google.maps.MapTypeId.ROADMAP
					};
					var map = new google.maps.Map(document.getElementById("googleMap"), yourmap);
					var marker = new google.maps.Marker({
						position: new google.maps.LatLng(latitude, longitude),
					});

					marker.setMap(map);
					var infowindow = new google.maps.InfoWindow({
						content: "当前位置!"
					});
					infowindow.open(map, marker);
					google.maps.event.addListener(map, 'click', function(e) {
						reverseGeocode(e.latLng.lat(), e.latLng.lng())
					})
				};

				function addMarker(longitude, latitude) {
					const marker = {
						id: this.markers.length + 1,
						longitude,
						latitude,
						iconPath: '/static/marker.png',
						width: 20,
						height: 20
					};
					this.markers.push(marker);
					this.mapContext.addMarkers({
						markers: this.markers,
						clear: true
					});
				}

				function error(e) {
					alert('地理位置不可用fa',e);
				};


				if ("geolocation" in navigator) {
					navigator.geolocation.getCurrentPosition(success, error);
				} else {
					alert('地理位置不可用ter');
				}
			};
			google.maps.event.addDomListener(window, 'load', initialize);
		</script>
	</head>
	<body>
		<div id="googleMap" style="width:100vw;height:100vh;"></div>
	</body>
</html>
//本段代码来源于网络 仅作自己记录方便后期查询,和给正在踩坑的友友们一个借鉴 侵删

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111

    以上就是所有获取谷歌选点定位的流程
    以下是当用户输入地址 ,实现地址解析的方法

    	// 解析地址
//用户输入时可以动态调用这个函数 也可以当用户输入完成,根据自己的业务逻辑调整
			getGoogleLocation(address) {
				if (!address) return
						const apiKey = '你的谷歌地图key';
				const url =`https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(address)}&key=${apiKey}`;
				uni.request({
					url: url,
					method: 'GET',
					success: (res) => {
						console.log("res:", res)
						// 解析API响应
						const results = res.data.results;
						if (results.length > 0) {
							// 获取解析后的位置信息
							const location = results[0].geometry.location;
							const latitude = location.lat;
							const longitude = location.lng;
							this.userInfo.newAddress = address
							this.userInfo.longitude = longitude
							this.userInfo.latitude = latitude
							this.userInfo.address = address
							// 在这里可以使用解析后的位置信息进行后续操作
							console.log("Latitude:", latitude);
							console.log("Longitude:", longitude);
						} else {
							uni.showToast({
								title: '未查询到该地址，请重试',
								icon: 'none'
							})
							console.log("No results found.");
						}
					},
					fail: (err) => {
						console.log("Error:", err);
					}
				});
			},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    奇葩需求: app内嵌套h5的另一套代码系统里面也需要使用谷歌地图,这怎么办呢 h5接收不到webview返回的值;原理都大差不差就得用原生js的方法来实现,下面纸列出了有变动的代码 其他的都和上面一样

    //跳转谷歌地图前页面 
mounted(){
		const key = 'LocationAddress';
				const data = localStorage.getItem(key);
				localStorage.removeItem(key);
				if (typeof data !== "string") return;
				const x = JSON.parse(data);
				console.log('===x拿到返回的数据 处理业务逻辑啦', x);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    /webview 页面 
<template>
	<view>
		<iframe id="iframe" src="../../../static/html/google-map.html"></iframe>
	</view>
</template>

<script>
	var iframe = document.getElementById('iframe');
	window.addEventListener('message', (e) => {
		console.log(e, 'eeeeee')
	}, false);
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    //google-map.html 页面 的返回函数改成这样
      function onBack(data) {
			localStorage.setItem('LocationAddress', JSON.stringify(data));
			history.back();
        }


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
  • 相关阅读:
    C和指针 第9章 字符串、字符和字节 9.14 编程练习
    EMQX启用双向SSL/TLS安全连接以及java连接
    算法日记-02完全背包和多重背包问题总结
    C++ PrimerPlus 复习 第七章 函数——C++的编程模块（上）
    负债99.5万美元的【飞天兆业】申请1125万美元纳斯达克IPO上市
    java（1）
    计算机毕设（附源码）JAVA-SSM基于疫情防控的物资管理与发放系统
    8.1_[Java 方法]-类的带参方法
    iZotope RX 11 for Mac：音频修复的终极利器
    ITSS信息技术服务运行维护标准符合性证书申请详解及流程
  • 原文地址：https://blog.csdn.net/VueJiang/article/details/133787227