Google Maps Нарисуйте меньший многоугольник внутри многоугольника

Question

Так что я пытаюсь отображать фигуры на Картах Google (используя V3 API), которые имеют ту же форму, что и меньше внутри. В основном коробка с коробкой или полигоном внутри полигона.

Для прямоугольника У меня есть следующий код, который работает:

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

Конечно, делать это для многоугольника другой коленкор. Я знаю, что могу использовать getPaths(), чтобы получить атрибуты каждой строки, но разработка того, как размещать внутренние линии, и, действительно, работать там, где «внутри», оказывается для меня совершенно концептуально сложной.

Я хотел бы знать, возможно ли, что я хочу достичь, с учетом API google, и буду признателен за любые указания по его устранению.

Answer 1

Один из вариантов, если вы многоугольники «простые» (центр «внутри» многоугольника и нет вогнутых сторон), было бы сделать что-то похожее на то, что вы сделали с прямоугольником (который представляет собой четырехгранный многоугольник который отвечает этим критериям):

Используя geometry library:

Чтобы включить его:

<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script> 

кода (предполагает глобальный "поли" и другие):

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

proof of concept fiddle Играйте с полигоном в фрагменте кода или в jsfiddle, чтобы увидеть ограничения.

var map; 
 
var infoWindow; 
 
var poly; 
 
var inner; 
 
var polylines = []; 
 
var centerMarker; 
 

 
var paths = [ 
 
    [ 
 
    new google.maps.LatLng(38.872886, -77.054720), 
 
    new google.maps.LatLng(38.872602, -77.058046), 
 
    new google.maps.LatLng(38.870080, -77.058604), 
 
    new google.maps.LatLng(38.868894, -77.055664), 
 
    new google.maps.LatLng(38.870598, -77.053346) 
 
    ] 
 
]; 
 

 
function initialize() { 
 
    var mapOptions = { 
 
    center: new google.maps.LatLng(38.8714, -77.0556), 
 
    zoom: 15 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 

 
    poly = new google.maps.Polygon({ 
 
    paths: paths, 
 
    strokeWeight: 3, 
 
    fillColor: '#55FF55', 
 
    fillOpacity: 0.5, 
 
    editable: true 
 
    }); 
 

 
    poly.setMap(map); 
 
    drawEdgesPoly(); 
 

 
    google.maps.event.addListener(poly.getPath(), 'insert_at', drawEdgesPoly); 
 
    google.maps.event.addListener(poly.getPath(), 'remove_at', drawEdgesPoly); 
 
    google.maps.event.addListener(poly.getPath(), 'set_at', drawEdgesPoly); 
 

 
    // Define an info window on the map. 
 
    infoWindow = new google.maps.InfoWindow(); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize); 
 

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

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script> 
 
<div id="map-canvas" style="height:100%; width:100%;"></div>