信息窗口中带有单击事件的按钮

时间:2018-09-17 06:15:50

标签: javascript google-maps ionic-framework

我已在信息窗口内容内的按钮上添加了click事件。但是,即使不单击按钮,在单击事件之后应运行的代码也会执行。加载地图后,会自动执行console.log(“ Hi”)click事件代码。我不知道到底是什么触发了按钮的单击事件。

getPostsForMarker(defaultlat, defaultlng) {
    this.searchService.getAllPostForMarker(defaultlat, defaultlng).subscribe(
      data => {
        this.postMarker = data;

        var resultArray = [];
        for (let i = 0; i < this.postMarker.length; i++) {
          console.log(this.postMarker[i]);
          console.log(this.postMarker[i].Latitude);
          this.locations = [
            resultArray[i] = { lat: this.postMarker[i].Latitude, lng: this.postMarker[i].Longitude }
          ]
        }

        console.log(resultArray);
        console.log("Zoom map to");
        console.log(resultArray[0]);

        const options = {
          center: resultArray[0],
          zoom: 12
        }

        this.map = new google.maps.Map(this.mapRef.nativeElement, options);

        //to add marker in the map
        var marker = [];
        for (let i = 0; i < resultArray.length; i++) {
          marker[i] = new google.maps.Marker({
            position: resultArray[i],
            map: this.map
          });
          //to add info window
          marker[i].addListener('click', (event) => {
            infowindow[i].open(this.map, marker[i])
          })

        }

        // contents to display in info window
        var contentString = [];
        for (let i = 0; i < this.postMarker.length; i++) {
          contentString[i] =
            '<b>Space Type:</b> ' + this.postMarker[i].Space.SpaceTypeName +
            '<br><b>Address:</b> ' + this.postMarker[i].Address +
            '<br><b>Purpose:</b> ' + this.postMarker[i].Suitable.SuitableForType +
            '<br><b>Price:&nbsp;</b>' + this.postMarker[i].Price +
            '<br><strong>No of available rooms:&nbsp;</strong>' + this.postMarker[i].NoOfRooms +
            '<br>' +
             '<input type="button" value="View Details"  id="detailbtn" onclick="'+console.log("Hi")+'"/>'
            ;
        }


        //to add info window in the map
        var infowindow = [];
        for (let i = 0; i < this.postMarker.length; i++) {
          infowindow[i] = new google.maps.InfoWindow({
            content: contentString[i]
          });
        }

      });



  }

0 个答案:

没有答案