如何在Ionic 3中从HTML调用函数?

时间:2018-10-23 08:06:48

标签: html ionic3 angular5

我正在从HTML调用plot()函数,但是该函数被多次调用。条件为true时只能调用一次。在绘制到Map之前,我的plot()函数已被调用多次。

 plot(){
    var self = this;
    this.geolocation.getCurrentPosition().then((position) =>   {
 
      let lat = self.lat;
      let lng= self.lng;
       console.log(lat);
       console.log(lng);
      let mapOptions = {
        center: new google.maps.LatLng(lat,lng),
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
      this.addMarker();
    }, (err) => {
      console.log(err);
    });
  }
  addMarker(){
    console.log("coming in marker");
    var self=this;
    let lat = self.lat;
    let lng= self.lng;
    var markerPos = new google.maps.LatLng(lat,lng);
    let marker = new google.maps.Marker({
    map: self.map,
    animation: google.maps.Animation.DROP,
    position:markerPos,
    
 });
 console.log(marker.position);
 let content = "<h4>Information!</h4>";          
 this.addInfoWindow(marker, content);
}
addInfoWindow(marker, content){
 
  let infoWindow = new google.maps.InfoWindow({
    content: content
  });

 google.maps.event.addListener(marker, 'click', () => {
   infoWindow.open(this.map, marker);
 });
}
<div style="width: 80%;margin-right:3%;" *ngIf="chatMessage.types=='checkin' " class="message {{chatMessage.type === 'message_response' ? 'right' : 'left'}} img">
    <img *ngIf="chatMessage.userIcon=='mji247'" src="assets/mji.png">
    <img *ngIf="chatMessage.userIcon==''" src="assets/user.png">
    <p style="font-size: 12px;white-space: pre-wrap;">{{this.chatMessage.msg.name}}:</p>
 
    <div #map id="map" style="height: 200px;width: 225px;float: right;margin-right: 22px;border-radius: 5%;">
        {{plot()}} 
    </div>
    <p *ngIf="chatMessage.type != 'message_response'" style="overflow: auto;text-align: right;margin-left: 12%;font-size: 12px;white-space: pre-wrap;">{{this.chatMessage.msg.date}}</p>
    <p *ngIf="chatMessage.type == 'message_response'" style="overflow: auto;font-size: 12px;white-space: pre-wrap;">{{this.chatMessage.msg.date}}</p>
</div>

1 个答案:

答案 0 :(得分:0)

install(FILES 
        ${CMAKE_CURRENT_SOURCE_DIR}/fileA 
        ${CMAKE_CURRENT_SOURCE_DIR}/fileB
    DESTINATION /etc/path/here
    PERMISSIONS
    OWNER_EXECUTE OWNER_WRITE OWNER_READ
    GROUP_EXECUTE GROUP_WRITE GROUP_READ
    WORLD_EXECUTE WORLD_WRITE WORLD_READ
    )