uniapp地图选址(支持android ios h5)

最新推荐文章于 2024-09-14 12:28:27 发布

universe Coding

最新推荐文章于 2024-09-14 12:28:27 发布

阅读量2.3k

点赞数

分类专栏： uniapp 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/zzq422911531/article/details/122323203

版权

uniapp 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

类似于微信发送位置功能
获取位置经纬度省市区
效果如下在这里插入图片描述
参考文档：腾讯位置服务
支持 android ios H5
有两种调用方法
iframe调用
backurl调用
参数 backurl = 回调的H5页面, 参考下方回调html https://www.你发布的HTML域名地址.com/mapTransfer/index.html

        <view class="page-body">
					<view class="page-section page-section-gap">
						<web-view
							id="myMap"
							width="100%"
							height="100%"
							@message="handleMessage"
							src="https://mapapi.qq.com/web/mapComponents/locationPicker/v/index.html?search=1&type=0&backurl=https://www.你发布的HTML域名地址.com/mapTransfer/index.html&key=EJ2BZ-ONJ3D-HK64O-HO7IP-4PF42-TRBLI&referer=myapp"
						>
						</web-view>
					</view>
        </view>

	export default {
		data() {
			return {
				latng:"",
				addr:"",
			}
		},
	    methods: {
	    		//监听html 发送的消息
			  handleMessage(evt) { 
				  console.log('监听')
					console.log("postMessage: ", evt)  
					// 获取的参数保存				
					let mapData = {
						latng:evt.detail.data[0].latng,
						addr:evt.detail.data[0].addr,
					}
					console.log(decodeURI(evt.detail.data[0].addr))
					//存储在缓存中
					uni.setStorageSync('mapData', mapData);
					//回跳
					uni.navigateBack({
							delta: 1
					});
				},  
		}
	}

回调html
回调的HTML代码，需要发布到服务器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>地图选址</title>
</head>
<body>
  <script>
     var userAgent = navigator.userAgent;
      if (/quickapp/i.test(userAgent)) {
        // quickapp
        console.log('quickapp')
        document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');
      }
      if (!/toutiaomicroapp/i.test(userAgent) && document.querySelector('.post-message-section')) {
        console.log('quickapp111')
        document.querySelector('.post-message-section').style.visibility = 'visible';
      }
  </script>
  <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
  <script>
  		//	选址的参数会拼接到链接后
      var surl = window.location.href
      console.log(surl)
      var obj = {};
      //截取参数
      var urls = surl.substr(surl.indexOf("?")+1).split("&");
      for(var i = 0;i<urls.length;i++){
      var temp = urls[i].split("=");
      obj[temp[0]] = temp[1]
      }
      console.log(obj)
      // Window.parent.postMessage(obj,'*');
      
      document.addEventListener('UniAppJSBridgeReady', function() {
        uni.webView.getEnv(function(res) {
          console.log('当前环境：' + JSON.stringify(res));
        });
        //发送消息给app 通知app关闭地图选址，并获取参数
         uni.postMessage({  
              data: obj 
          }); 
        console.log(unescape(obj.name))
          // uni.webView.navigateTo({
          //   url:'/pagesB/shop/newShop?latng='+obj.latng+'&name='+obj.name
          // })
   
      });


  </script>
</body>
</html>