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