【技巧】ionic调用高德选址组件

image.png

高德api地址：http://lbs.amap.com/api/lightmap/guide/picker
涉及到postMessage：https://www.baidu.com/link?url=2s1DEnZR5dhS0hJaNbb_kA9jauWwv4Z5z5vjM2_FJYWVFbNd9OEtFz53UYVc1k-41icGT1uDZjPlAwQvr0TS6v2RCPbyGzjBf8OtMhSJSDa&wd=&eqid=dcc53a50000238af000000065b2cbd7e

注意：一般调用第三方js的话，都会存在异步问题，初始化方法的时候最好做下延时

代码：

index.html：引入高德

新建一个iframePage
iframe.html

    
        
            
                         
                     
        
        {{title}}
    





    

iframe.ts

import { TESTSTATE } from './../../providers/constants/constants';
import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams, Events, ViewController } from 'ionic-angular';
import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
declare let window;  

@IonicPage({
  name:'IframePage'
})
@Component({
  selector: 'page-iframe',
  templateUrl: 'iframe.html',
})
export class IframePage {
  @ViewChild("test") iframeCon:ElementRef
  title;
  appurl;
  iframe:SafeResourceUrl;
  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public sanitizer:DomSanitizer,
    public events:Events,
    public viewCtrl:ViewController  

  ) {
    this.title = "请选址你的所在地"
    this.appurl = 'https://m.amap.com/picker/?key=你的key'
    this.iframe = this.sanitizer.bypassSecurityTrustResourceUrl(this.appurl);
  }

  ionViewWillEnter() {
    setTimeout(() => {
      let iframea = this.iframeCon.nativeElement.contentWindow;  // 这里要注意
      iframea.postMessage('hello', '*');
      window.addEventListener("message",  (e) =>{
        alert('您选择了:' + e.data.name + ',' + e.data.location)
        // this.events.publish('MapSelect', e);    
        this.viewCtrl.dismiss();
      }, false);

    }, 2000);
   
    
  }

  close(){
    this.viewCtrl.dismiss();
  }
 
 
}

建议用modalCtrl弹出此页面，因为用push的话pop时会出现问题

iframe.scss

page-iframe {
    iframe {
        width: 100%;
        height: 100%;
        margin-top: -45px;
    }
}