Question

有人可以帮我解决这个问题吗？我想创建这样的严格界限：

    var strictBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(51.51260063140188, 5.100499215469426),
        new google.maps.LatLng(51.527701526080484, 5.1409469274140065)
    );

    //Listen for the dragend event
    map.addListener('dragend', function () {
        if (strictBounds.contains(map.getCenter())) return;

        //We're out of bounds - Move the map back within the bounds
        var c = map.getCenter(),
            x = c.lng(),
            y = c.lat(),

            maxX = strictBounds.getNorthEast().lng(),
            maxY = strictBounds.getNorthEast().lat(),
            minX = strictBounds.getSouthWest().lng(),
            minY = strictBounds.getSouthWest().lat();

        if (x < minX) x = minX;
        if (x > maxX) x = maxX;
        if (y < minY) y = minY;
        if (y > maxY) y = maxY;
        map.setCenter(new google.maps.LatLng(y, x));
    });

这就是我在javascript中所做的，但我怎样才能在angular2-google-maps中实现这一点：LINK

我希望你们其中一个人可以帮助我并告诉我如何开始

Answer 1

在angular2-google-maps / src / directives / google-map.ts中的_initMapInstance中执行此函数，如下所示：

  private _initMapInstance(el: HTMLElement) {
this._mapsWrapper.createMap(el, {

});
this._handleBoundaries();



private _handleBoundaries() {
   this._mapsWrapper.subscribeToMapEvent<void>('dragend').subscribe(() => {
   this._mapsWrapper.getCenter().then((center: LatLng) => {

      var x = this._longitude;
      var y = this._latitude;

      // console.log('y',y, 'x', x);

      var maxX = 5.139133754119953;
      var maxY = 51.52773156266013;
      var minX = 5.105831446991047;
      var minY = 51.51337849651561;

      if (x < minX) x = minX;
      if (x > maxX) x = maxX;
      if (y < minY) y = minY;
      if (y > maxY) y = maxY;

      this._mapsWrapper.setCenter({lat: y, lng: x});
   });
});

}

Angular 2如何设置strictBounds

1 个答案: