Полигон карты мира с отверстием (карты google)

Я пытаюсь нарисовать прямоугольник многоугольника с отверстием. Моя проблема в том, что я не могу создать многоугольник, охватывающий весь мир. Полигон инвертирован так, что вместо всего мира выбирается только одна строка.Полигон карты мира с отверстием (карты google)

Ниже приведен пример максимального выбора, который я могу сделать. Например, если я попытаюсь изменить 0 (в строке new google.maps.LatLng (-85.1054596961173,)) для любого другого значения используется инвертированный выбор.

Возможно, мне не хватает чего-то очевидного здесь, но я не могу заставить его работать.

function initialize() { 
    var mapOptions = { 
    zoom: 1, 
    center: new google.maps.LatLng(24.886436490787712, -70.2685546875), 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 


    var map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 

    var worldCoords = [ 
    new google.maps.LatLng(-85.1054596961173, -180), 
    new google.maps.LatLng(85.1054596961173, 180), 
    new google.maps.LatLng(85.1054596961173, 180), 
    new google.maps.LatLng(-85.1054596961173,0) 

    ]; 

    var EuropeCoords = [ 
       new google.maps.LatLng(29.68224948021748, -23.676965750000022), 
       new google.maps.LatLng(29.68224948021748, 44.87772174999998), 
       new google.maps.LatLng(71.82725578445813, 44.87772174999998), 
       new google.maps.LatLng(71.82725578445813, -23.676965750000022) 
    ]; 


    // Construct the polygon. 
    poly = new google.maps.Polygon({ 
    paths: [worldCoords,EuropeCoords], 
    strokeColor: '#000000', 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: '#000000', 
    fillOpacity: 0.35 
    }); 


    poly.setMap(map); 
}

Вот скрипка: http://jsfiddle.net/xs9fcdf9/4/

источник

2014-12-10 Nebu

Мой вопрос не такой же, как 'Google Maps API многоугольник с „Hole“ В центре'. Моя проблема заключается в том, как создать прямоугольник, который охватывает мир. Отверстие в многоугольнике не проблема, а желаемая функция, которую я уже успешно реализовал. – Nebu

Связанный вопрос: [Изменить непрозрачность карты вне круга API Google Maps JavaScript API версии 3] (http://stackoverflow.com/questions/19736418/change-map-opacity-outside-circle-of-google-maps-javascript-api- v3) – geocodezip

@geocodezip Оказывается, мой вопрос - это дубликат (другой подход, но тот же вопрос). В любом случае спасибо за то, что я действительно прочитал свой вопрос (и ответил на него) вместо «слепо», обозначив его как дубликат, на мой взгляд, не связанный с этим вопрос. – Nebu

Вы должны сделать направление намотки внешнего многоугольника противоположна внутреннего многоугольника и добавить точку:

var worldCoords = [ 
    new google.maps.LatLng(-85.1054596961173, -180), 
    new google.maps.LatLng(85.1054596961173, -180), 
    new google.maps.LatLng(85.1054596961173, 180), 
    new google.maps.LatLng(-85.1054596961173, 180), 
    new google.maps.LatLng(-85.1054596961173, 0) 
];

working fiddle

фрагмент рабочего кода:

function initialize() { 
 
    var mapOptions = { 
 
     zoom: 1, 
 
     center: new google.maps.LatLng(24.886436490787712, -70.2685546875), 
 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
 
    }; 
 

 

 
    var map = new google.maps.Map(document.getElementById('map-canvas'), 
 
    mapOptions); 
 

 
    var worldCoords = [ 
 
    new google.maps.LatLng(-85.1054596961173, -180), 
 
    new google.maps.LatLng(85.1054596961173, -180), 
 
    new google.maps.LatLng(85.1054596961173, 180), 
 
    new google.maps.LatLng(-85.1054596961173, 180), 
 
    new google.maps.LatLng(-85.1054596961173, 0)]; 
 

 

 
    var EuropeCoords = [ 
 
    new google.maps.LatLng(29.68224948021748, -23.676965750000022), 
 
    new google.maps.LatLng(29.68224948021748, 44.87772174999998), 
 
    new google.maps.LatLng(71.82725578445813, 44.87772174999998), 
 
    new google.maps.LatLng(71.82725578445813, -23.676965750000022)]; 
 

 

 
    // Construct the polygon. 
 
    poly = new google.maps.Polygon({ 
 
     paths: [worldCoords, EuropeCoords], 
 
     strokeColor: '#000000', 
 
     strokeOpacity: 0.8, 
 
     strokeWeight: 2, 
 
     fillColor: '#000000', 
 
     fillOpacity: 0.35 
 
    }); 
 

 
    poly.setMap(map); 
 
} 
 
initialize();

<script src="http://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas" style="width:500px;height:500px;"></div>

источник

2014-12-10 14:57:22 geocodezip

Полигон карты мира с отверстием (карты google)

ответ

Смежные вопросы