iframe.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <template>
  2. <view class="content">
  3. <iframe id="mapPage" width="100%" height="100%" frameborder=0
  4. src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=SOUBZ-3EQWO-FVRWG-SFXV2-O3WYO-VJBMP&referer=myapp">
  5. </iframe>
  6. </view>
  7. </template>
  8. <script>
  9. export default {
  10. data() {
  11. return {
  12. is_true:true,
  13. }
  14. },
  15. onLoad() {
  16. },
  17. mounted() {
  18. this.ReceiveMessage();
  19. },
  20. onShow(e) {
  21. },
  22. onReady() {
  23. // window.addEventListener("message", this.ReceiveMessage);
  24. },
  25. methods: {
  26. ExchangeJoinArea(loc) {
  27. this.request({
  28. url: "exchange/ExchangeJoinArea",
  29. data: {
  30. token: uni.getStorageSync("token"),
  31. is_area_exchange: "Y",
  32. longitude: loc.latlng.lng,
  33. latitude: loc.latlng.lat,
  34. address:loc.poiaddress,
  35. },
  36. }).then(res => {
  37. if (res.code === '200' && res.message == '加入成功') {
  38. uni.showToast({
  39. title: res.message,
  40. icon: 'none'
  41. })
  42. setTimeout(()=>{
  43. uni.navigateBack();
  44. },2000)
  45. }else{
  46. uni.showToast({
  47. title: res.message,
  48. icon: 'none'
  49. })
  50. }
  51. }).catch((res) => {
  52. console.log(res, "res")
  53. uni.showToast({
  54. title: res.message,
  55. icon: 'none'
  56. })
  57. })
  58. },
  59. ReceiveMessage(event) {
  60. window.addEventListener('message', (event)=>{
  61. // 接收位置信息,用户选择确认位置点后选点组件会触发该事件,回传用户的位置信息
  62. var loc = event.data;
  63. // console.log(this.is_true,loc,"this.is_true")
  64. if (loc && loc.module == 'locationPicker' && this.is_true) {//防止其他应用也会向该页面post信息,需判断module是否为'locationPicker'
  65. this.is_true=false;
  66. // console.log(this.is_true,"false")
  67. this.ExchangeJoinArea(loc) // 获取的选中的地址数据
  68. }
  69. return false
  70. }, false);
  71. },
  72. },
  73. }
  74. </script>
  75. <style>
  76. page{
  77. width: 100%;
  78. height: 100%;
  79. }
  80. .content{
  81. width: 100%;
  82. height: 100%;
  83. }
  84. #mapPage{
  85. width: 100%;
  86. height: 100%;
  87. }
  88. </style>