javascript - Google map v3 多边形/线垂直撕裂和偏移

Question

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

这是我的 map 选项:

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 的问题。

基本上，您必须覆盖 Canvas 中 box-sizing 的样式。

See this link for more details.

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

In bootstrap 3 there is a base style in scaffolding.less for

* {
    .box-sizing(border-box);
} 

On a google map this causes the info windows to draw the arrow to the marker slightly below the main box. http://grab.by/oYLU

Can you be more specific and just assign the box-sizing to elements that really need it instead of everything getting it on the page?

The only solution I have that seems to work is put a google-maps class on the map div and set its box sizing to content-box

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

// FIX FOR GOOGLE MAP CANVAS

.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;
    } }