Get location with x / y (pixel) offset


#1

Hi all,

I’m using the Native Google Maps in my Ionic 3 project where I want to move the camera to a marker with a certain offset. For example: i want the marker to be at (view top + 25%).

I already did implement this with the javascript Maps using this function:

  //  I my case: offsetX = 0 and offsetY = 250;
  private getOffsetCenter(latlng: ILatLng, offsetX: number = 0, offsetY: number = 0) {
    const scale = Math.pow(2, this.map.getZoom());

    const worldCoordinateCenter = this.map.getProjection().fromLatLngToPoint(latlng);
    const pixelOffset = new google.maps.Point((offsetX / scale), (offsetY / scale));

    const worldCoordinateNewCenter = new google.maps.Point(
      worldCoordinateCenter.x - pixelOffset.x,
      worldCoordinateCenter.y + pixelOffset.y,
    );

    return this.map.getProjection().fromPointToLatLng(worldCoordinateNewCenter);
  }

Is there an existing function or an other solution for translating this to the “native” way?

Thanks you!

@wf9a5m75


#2

This is what I have for now (Native version). But this animates to the wrong location on first this.map.animateCamera, but when on the same zoomlevel, it does animate to the right position.

  private async offsetCenter(latlng: ILatLng, offsetX: number = 0, offsetY: number = 0) {
    const worldCoordinateCenter = await this.map.fromLatLngToPoint(latlng);
    const scale = Math.pow(2, this.map.getCameraZoom());
    const newCenter = [
      worldCoordinateCenter[0] - (offsetX / scale),
      worldCoordinateCenter[1] + (offsetY / scale),
    ];

    return await this.map.fromPointToLatLng(newCenter);
  }

Tried this with and without using the scale, but I keep getting the same wrong movement on first animation.


#3

Does anyone have some any ideas for this?