ionic 2 googlemaps 自定义控件

Question

我从我的代码中得到了这个：

提供的参数与调用目标的任何签名都不匹配。

var centerControl = new HomePage();

“HTMLDivElement”类型上不存在属性“index”。

centerControlDiv.index = 1;

这是我的代码：

import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Geolocation } from 'ionic-native';

declare var google;

@Component({
  selector: 'page-homepage',
  templateUrl: 'homepage.html'
})

export class HomePage {
  @ViewChild('map') mapElement;
  map: any;

  constructor(public navCtrl: NavController, controlDiv, map) {
      // Set CSS for the control border.
    var controlUI = document.createElement('div');
    controlUI.style.backgroundColor = '#fff';
    controlUI.style.border = '2px solid #fff';
    controlUI.style.borderRadius = '3px';
    controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
    controlUI.style.cursor = 'pointer';
    controlUI.style.marginBottom = '22px';
    controlUI.style.textAlign = 'center';
    controlUI.title = 'Click to recenter the map';
    controlDiv.appendChild(controlUI);

    // Set CSS for the control interior.
    var controlText = document.createElement('div');
    controlText.style.color = 'rgb(25,25,25)';
    controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
    controlText.style.fontSize = '16px';
    controlText.style.lineHeight = '38px';
    controlText.style.paddingLeft = '5px';
    controlText.style.paddingRight = '5px';
    controlText.innerHTML = 'Center Map';
    controlUI.appendChild(controlText);

    // Setup the click event listeners: simply set the map to Chicago.
    controlUI.addEventListener('click', function() {
      map.setCenter(location);
    });
  }

  ionViewDidLoad(){
      this.initMap();
  }

  initMap(){

    Geolocation.getCurrentPosition().then((position) => {
      let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

      let mapOptions = {
        center: latLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

      var marker = new google.maps.Marker({
          position: latLng,
          map: this.map
      });

      // Create the DIV to hold the control and call the CenterControl() constructor
      // passing in this DIV.
      var centerControlDiv = document.createElement('div');
      var centerControl = new HomePage();

      centerControlDiv.index = 1;
      this.map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);

    },(err) => {
      console.log(err);
      }
    );

  }

}

page-homepage {
  #map{
    height: 90%;
    width: 100%;
  }
}

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Google Custom</ion-title>

  </ion-navbar>
</ion-header>

<ion-content>
  <div #map id="map">

  </div>
</ion-content>

我想做类似的事情https://developers.google.com/maps/documentation/javascript/examples/control-custom?hl=es-419

Answer 1

使用函数setCenter，然后在html中添加一个按钮:)

centerMapa(){
  let latLng = new google.maps.LatLng(this.lat, this.lng);
  this.map.setCenter(latLng);
}

<button (click)='centerMapa();' ion-button clear large color="dark" icon-only>
  <ion-icon name="ios-navigate"></ion-icon>
</button>

Answer 2

你试过删除

 var centerControl = new HomePage();

然后跑？

你不能像函数一样调用你的主页。