Javascript 使用谷歌地图在多边形内绘制一个较小的多边形
我试图在GoogleMaps(使用API的V3)上渲染形状,其中包含相同的形状,只是内部更小。基本上是盒子中的盒子或多边形中的多边形 对于矩形,我有以下代码,可以使用:Javascript 使用谷歌地图在多边形内绘制一个较小的多边形,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我试图在GoogleMaps(使用API的V3)上渲染形状,其中包含相同的形状,只是内部更小。基本上是盒子中的盒子或多边形中的多边形 对于矩形,我有以下代码,可以使用: var drawEdgesRectangle = function (shape) { // shape is the original, parent rectangle var NE, SW, childNE, childSW, padding, diagonal, inner; // set padding
var drawEdgesRectangle = function (shape) {
// shape is the original, parent rectangle
var NE, SW, childNE, childSW, padding, diagonal, inner;
// set padding constant to 1 (i.e. 1m distance all around)
padding = 1;
// get diagonal distance from corner
diagonal = Math.sqrt(2) * padding;
// get NE of parent
NE = shape.bounds.getNorthEast();
// get SW of parent
SW = shape.bounds.getSouthWest();
// get child NE, SW
childNE = google.maps.geometry.spherical.computeOffset(NE, diagonal, 225);
childSW = google.maps.geometry.spherical.computeOffset(SW, diagonal, 45);
// render inner shape
inner = new google.maps.Rectangle({
strokeColor: 'white',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: 'black',
fillOpacity: 0.35,
map: map,
bounds: new google.maps.LatLngBounds(
childSW,
childNE
)
});
}
当然,对多边形执行此操作是另一回事。我知道我可以使用getpath()
来获取每一行的属性,但要想知道如何放置内行,以及“inside”在哪里,在概念上对我来说是相当困难的
我想知道,在谷歌API的帮助下,我想实现的目标是否可行。如果多边形是“简单的”(中心在多边形的“内部”,没有凹边),那么一个选项就是做一些与矩形类似的事情(这是一个符合这些标准的四边形): 使用: 包括:
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script>
在上面执行此操作所需的多边形有多复杂?它们是任意的吗?理想情况下,我愿意接受任何类型的多边形。在现实中,问题不太可能由>10条线组成。线/顶点的数量不是复杂性的真正衡量标准。有凹面吗?多边形的中心是否在多边形内?如果是这样的话(并且没有凹边),你应该能够做一些类似于你对矩形所做的事情。
var drawEdgesPoly = function() {
// shape is the original, parent polygon
var shape = poly;
// set padding constant to 1 (i.e. 1m distance all around)
padding = 50;
var vertices = shape.getPath();
var polybounds = new google.maps.LatLngBounds();
for (var i = 0; i < vertices.getLength(); i++) {
polybounds.extend(vertices.getAt(i));
}
var center = polybounds.getCenter();
if (centerMarker && centerMarker.setMap) {
centerMarker.setMap(null);
}
centerMarker = new google.maps.Marker({
position: center,
map: map,
icon: {
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(4, 4)
}
});
if (polylines && (polylines.length > 0)) {
for (var i = 0; i < polylines.length; i++) {
polylines[i].setMap(null);
}
}
polylines = [];
var newPath = [];
for (var i = 0; i < vertices.getLength(); i++) {
polylines.push(new google.maps.Polyline({
path: [center, vertices.getAt(i)],
map: map,
strokeWidth: 2,
strokeColor: 'red'
}));
newPath[i] = google.maps.geometry.spherical.computeOffset(vertices.getAt(i),
padding,
google.maps.geometry.spherical.computeHeading(vertices.getAt(i), center));
}
if (inner && inner.setMap)
inner.setMap(null);
// render inner shape
inner = new google.maps.Polygon({
strokeColor: 'white',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: 'black',
fillOpacity: 0.35,
map: map,
editable: false,
path: newPath
});
};