Google Maps v3多边形/线垂直撕裂和偏移

Question

在测试Google地图时，我遇到了一个奇怪的错误。渲染多边形/线时，我会沿着多边形/线周期性地看到垂直“撕裂”。由眼泪和多边形/线本身创建的部分也基于缩放级别具有看似随机的偏移。这发生在Linux上的Chrome，OSX上的Safari和Windows 10上的Edge上.gif解释得比我好得多。

以下是我的地图选项：

zoom: 8,
mapTypeId: google.maps.MapTypeId.HYBRID

以下是我添加多边形的方法：

var polygon = new google.maps.Polygon({
    path: node.data.path,
    title: node.text,
    strokeColor: node.data.strokeColor,
    strokeOpacity: node.data.strokeOpacity,
    strokeWeight: node.data.strokeWeight,
    fillColor: node.data.fillColor,
    fillOpacity: node.data.fillOpacity
});

mapElements[node.id].setMap(map);

我错过了什么，或者这是一个错误？

Answer 1

就我而言，这是Bootstrap 3的一个问题。

基本上你必须覆盖画布中* { .box-sizing(border-box); } 的样式。

See this link for more details.

来自link: [3.0 rc1] Google Maps Style Issues caused by * box-sizing #8945：

  

在bootstrap 3中，scaffolding.less中有一个基本样式

.google-map-canvas {
    .box-sizing(content-box); 
}

     

在谷歌地图上，这会导致信息窗口将箭头绘制到主框下方的标记处。   http://grab.by/oYLU

     

您可以更具体，只需将框大小分配给元素即可   真的需要它而不是一切都在页面上得到它？

     

我唯一能解决的解决方案是google-maps类   在地图div上并将其框大小设置为内容框

.google-map-canvas {
    .box-sizing(content-box);
    * {
        .box-sizing(inherit);
    }
    // in case you ever set max-width to 100% this fixes that
    img {
        max-width: none;
    } }

     

//修复Google地图CANVAS

public class SelectOptionViewModel
{
    public string Id { get; set; }
    public bool IsSelected { get; set; }
    public object Item { get; set; }
}