gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-27 23:33:53 25 4
gpt4 key购买 nike

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

What happening

这是我的 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);

我是否遗漏了什么,或者这是一个错误?

最佳答案

就我而言,这是 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;
} }

关于javascript - Google map v3 多边形/线垂直撕裂和偏移,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34293381/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com