本文主要是介绍uniapp app端使用谷歌地图选点定位，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
国内需要vpn 和申请谷歌地图的Maps JavaScript API 类型的 key,指引链接这里不详细介绍
一 、我们得通过webview 跳转谷歌地图 ,需要创建一个webview页面,里面跳转承载谷歌地图的html页面,如果是放在本地的话 html文件须遵守规范 放在 “项目根目录下->hybrid->html->google-map.html” 或static目录下
//跳转谷歌地图前页面,比如选择地址
<template><view @click="onSkip('/pages/mapWeb')">即将前往选择地址</view>
</template>
<script>export default {data() {return {}},onLoad(e) {//接收webview传值,能拿到经纬度 详细地址等信息uni.$on('googleMsg', (data) => {console.log('接收到值,继续业务处理', data)});},methods: {//跳转webviewonSkip(url) {uni.navigateTo({url: url})},}}
</script>
//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>
//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 get() {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>
//本段代码来源于网络 仅作自己记录方便后期查询,和给正在踩坑的友友们一个借鉴 侵删
以上就是所有获取谷歌选点定位的流程
以下是当用户输入地址 ,实现地址解析的方法
// 解析地址
//用户输入时可以动态调用这个函数 也可以当用户输入完成,根据自己的业务逻辑调整getGoogleLocation(address) {if (!address) returnconst 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 = addressthis.userInfo.longitude = longitudethis.userInfo.latitude = latitudethis.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);}});},
奇葩需求: 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);
}
/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>
//google-map.html 页面 的返回函数改成这样function onBack(data) {localStorage.setItem('LocationAddress', JSON.stringify(data));history.back();}这篇关于uniapp app端使用谷歌地图选点定位的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
