Question

我试图在标记上加载某个位置，并且该位置已正确加载。现在，我想在单击标记时调用一个函数。我实现了以下功能。

loadMap(clat, clon) {
let latLng = new google.maps.LatLng(clat, clon);

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

this.map = new google.maps.Map(this.mapRef.nativeElement, mapOptions);
new google.maps.Marker({
  position: new google.maps.LatLng(clat, clon),
  map: this.map,
  animation: google.maps.Animation.DROP,
  icon: {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 7,
    strokeColor: '#0057ff'
  }
});

var infowindow = new google.maps.InfoWindow();

var marker, i;

this.sellers.forEach(element => {
  console.log("where am i:" + element.location.la)

  marker = new google.maps.Marker({
    position: new google.maps.LatLng(element.location.la, element.location.lo),
    map: this.map
  });
  google.maps.event.addListener(marker, 'click', (function (marker, i) {
    return function () {
      infowindow.setContent(element.name + '<button ion-button (click)="{{test}}">Vist Shop</button>');
      infowindow.open(this.map, marker);

      this.type = element.sellertype;
      this.selectShopType(this.type)


    }
  })(marker, i));

});


}

在此函数中，我调用了“ selectShopType（）”函数，但收到一个名为

的错误

selectShopType（）不是函数

。如何使用标记属性调用外部函数

Answer 1

您可以使用下面使用的功能

this.map.addMarker(options).then((marker: GoogleMapsMarker) => {
         marker.addEventListener(GoogleMapsEvent.MARKER_CLICK)
        .subscribe(e => {
          console.log(“you clicked me");
          //implement the function 
               });
          });

Answer 2

您没有函数selectShopType函数，因此应将此函数添加到顶级范围

function  selectShopType(myvalue){

    alert('My value is : ' + myvalue);
    return;
}

loadMap(clat, clon) {
    let latLng = new google.maps.LatLng(clat, clon);

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

    this.map = new google.maps.Map(this.mapRef.nativeElement, mapOptions);
    new google.maps.Marker({
        position: new google.maps.LatLng(clat, clon),
        map: this.map,
        animation: google.maps.Animation.DROP,
        icon: {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 7,
            strokeColor: '#0057ff'
        }
    });

var infowindow = new google.maps.InfoWindow();

var marker, i;

this.sellers.forEach(element => {
    console.log("where am i:" + element.location.la)

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(element.location.la, element.location.lo),
        map: this.map
    });
    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
        infowindow.setContent(element.name + '<button ion-button (click)="{{test}}">Vist Shop</button>');
        infowindow.open(this.map, marker);

        this.type = element.sellertype;
        selectShopType(this.type);


    }
})(marker, i));

});

}

如何通过使用标记属性在地图内调用函数

2 个答案: