使用typeScript滚动到我的webView上的x，y坐标 [英] Scroll to an x,y coordinate on my webView using typeScript

问题描述

我正在应用程序中创建自定义地图.这本质上是一个大地图图像，我根据gps位置将一个小头像图像移到了大地图图像上.

I am making a custom map in my application. Which is essentially a large map image where I move a small avatar image over the large map image based on a gps location.

我允许用户在地图上滚动以查看屏幕外的地方.

I allow the user to scroll around the map to look at places off the screen.

我现在想包含一个按钮，该按钮会将用户重新定位在他们的位置.但它不起作用，我尝试使用:

I now want to include a button which will center the user back on their location. but it is not working, I have tried using:

  window.moveTo()
  window.scrollTo()

但是什么也没发生.有人可以协助吗?

but nothing happens. Can anyone assist with this?

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)
 }

推荐答案

尝试设置id是我不认为的正确方法.

Trying to set the id isn't the right way I don't think.

Freaky Jolly有一个教程，介绍如何滚动到X/Y坐标.

Freaky Jolly has a tutorial explaining how to scroll to an X/Y coord.

首先，在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:

In the code you need to use a @ViewChild to get a code reference to the ion-content then you can use its 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);
  }
}

我已经简化了这篇文章，因此如果您希望它真正起作用，则需要在其中添加一些内容，以便在页面上添加滚动条.

I've simplified the article so you will need to put some content in that adds scrollbars to the page if you want this to actually work.

这篇关于使用typeScript滚动到我的webView上的x，y坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！