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;`