Google Maps v3: определение наложений для использования на нескольких картах на одной странице.

Я создаю учебный документ, в котором потребуется элемент наложения (в данном примере — красный квадрат) для использования на нескольких картах Google на одной странице.

  • Я не могу успешно использовать функцию setMap() - похоже, она применяется к последней карте на странице.
  • Мне также не удалось успешно зациклить содержимое (не показано в этом коде) - мой синтаксис именования переменных, скорее всего, неверен

У меня также есть много других оверлеев, но пока я оставил этот пример кода простым.

Вот мой (нерабочий) код:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A.S.G.</title>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

function initialize() 
{
        var myOptions = 
        {
          zoom: 17,
          center: new google.maps.LatLng(38.5000000,-105.0000000),
          mapTypeId: google.maps.MapTypeId.SATELLITE
        };

        var map1 = new google.maps.Map(document.getElementById("map1"),myOptions);
        var map2 = new google.maps.Map(document.getElementById("map2"),myOptions);


        // Set Border Coords
        var BorderCoords = 
        [
            new google.maps.LatLng(38.5013726888,-104.99825068),
            new google.maps.LatLng(38.4986273112,-104.99825068),
            new google.maps.LatLng(38.4986273112,-105.00174932),
            new google.maps.LatLng(38.5013726888,-105.00174932)   
        ];      

        // Define Border
        var Border = new google.maps.Polygon
        ({
            paths: BorderCoords,
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 2
        });

        Border.setMap(map1);
        Border.setMap(map2);
}
</script>

</head>

<body onload="initialize()">
    <div id="map1" style="width:920px;height:400px;"></div>
    <div id="map2" style="width:920px;height:400px;"></div>
</body>
</html>

google-maps javascript google-maps-api-3 google-maps-markers
person NeonDevil    schedule 04.08.2011    source источник
comment
Я нашел эту связанную ссылку - я попытаюсь создайте функцию вне initialize() для рисования границы - скрещивает пальцы   -  person NeonDevil    schedule 05.08.2011

Ответы (1)


arrow_upward
0
arrow_downward

Когда вы вызываете setMap, он заменяет свойство «карта» полигона новым значением и отбрасывает старое значение. В этом случае вы сначала устанавливаете карту как карту1, а затем заменяете ее на карту2, поэтому ожидаемое поведение заключается в том, что полигон отображается только на карте2.

Следующий код должен делать то, что вам нужно:

    // Define Border
    var Border = new google.maps.Polygon
    ({
        paths: BorderCoords,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2
    });

    var Border2 = new google.maps.Polygon
    ({
        paths: BorderCoords,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2
    });

    Border.setMap(map1);
    Border2.setMap(map2);
person plexer    schedule 14.08.2011