html - 使用 TypeScript 滾動到我的 webView 上的 x,y 座標

我正在我的應用程式中製作一個自訂地圖。這基本上是一個大型地圖影像，我會根據 GPS 位置在大型地圖影像上移動一個小型虛擬人物影像。

我允許使用者在地圖上滾動，以查看螢幕外的地點。

我現在想加入一個按鈕，將使用者重新置中到他們的位置。但它無法運作，我已經嘗試使用：

  window.moveTo()
  window.scrollTo()

但什麼都沒有發生。有人可以幫忙嗎？

html

 <ion-content padding id=ionScroll scrollX="true" scrollY="true">

  <div id = "main" >
    <img class = "map"
    id = "map"
    src = "../../assets/img/limerickmap.JPG"
    alt = "map"/> 
    <img class = "avatar"
    id = "avatar"
    src = "../../assets/img/satan.png"
    alt = "avatar" />
  </div>
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button (click) = "centreMap()">
      <ion-icon name="compass"></ion-icon>
    </ion-fab-button>
  </ion-fab>

   </ion-content>

類型腳本

 ngOnInit() {
      ionScroll = window.document.getElementById("ionScroll");
 }

 centreMap() {
     ionScroll.scrollTo(avatar.style.left , avatar.style.top);
     console.log("TEST scroll" +avatar.style.left+"  "+avatar.style.top)
 }

答案＃1

我認為嘗試設置 id 並不是正確的方法。

Freaky Jolly 有一個教學解釋如何滾動到 X/Y 座標。

首先，你需要在 ion-content 上使用 scrollEvents：

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ion Content Scroll
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [scrollEvents]="true">
  <div style="height: 50px;width:600px;" text-right>
    <ion-button (click)="ScrollToPoint(-300, -120)">
      Scroll To Point Right
    </ion-button>
  </div>
</ion-content>

在程式碼中，你需要使用 @ViewChild 來獲取對 ion-content 的程式碼引用，然後你可以使用它的 ScrollToPoint() API：

import { Component, ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  @ViewChild(IonContent) content: IonContent;

  constructor(
  ){
  }

  ScrollToPoint(X,Y){
    this.content.scrollToPoint(X,Y,1500);
  }
}

我已經簡化了文章，所以如果你想讓這個真正起作用，你需要在其中加入一些內容來為頁面添加滾動條。