angular2-jQuery將像素添加到位置頂部

Question

當向上縮放18 + = 10px時，我想定位標記，所以我要這樣做的是：

  his._mapsWrapper.subscribeToMapEvent<void>('zoom_changed').subscribe(() => {
      this._mapsWrapper.getZoom().then((z: number) => {
     this._zoom = z;

     if(z === 18) {
        $('.marker').css({ 'width' : '25px', 'height' : '25px', 'line-height': '25px', 'top' : '+= 10!important' });
        $('.number-id').css({'font-size': '11px'})
     }

但是似乎無法工作，有人可以在這里幫助我嗎？ 這是一個PLUNKER ，您可以在src / google-maps / directive / google-map.ts中的_handleMapZoomChange（）方法中查看此代碼。

它的作用是將所有元素設置為10px，但是我基本上想要的是將當前的最高位置設置為10px。

 $('.marker').each( function (index) {
     console.log(index + ":" + $(this).css('top'));
     var currentTop = $(this).css('top');

     $(this).css('top', currentTop + '10px');
 })

Answer 1

如果使用自定義疊加層，則在調整標記的left或top位置時可能會導致意外行為，因為這與標記的latLng位置有關。

相反，只需使用margin-top css屬性（ margin-top: 10px或margin-top: -10px取決於您的需求）

繪制標記時同樣的事情，不要像這樣調整位置：

if (point) {
    div.style.left = (point.x - 10) + 'px';
    div.style.top = (point.y - 10) + 'px'; 
}

而是將偏移量作為margin-top和margin-left添加到標記的css中：

div.style.cssText = `width: 25px; 
                     height: 25px; 
                     ...
                     margin-top: -10px;
                     margin-left: -10px;`