Google Maps v3: определение оверлеев для использования на нескольких картах на одной странице - PullRequest
Новая
       8

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

1 голос
/ 05 августа 2011

Я создаю учебный документ, который требует использования наложенного элемента (в данном примере, красного квадрата) на нескольких картах 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>

1 Ответ

0 голосов
/ 14 августа 2011

Когда вы вызываете setMap, он заменяет свойство многоугольника map на новое значение и удаляет старое значение.В этом случае вы сначала устанавливаете map на map1, а затем заменяете его на map2, поэтому ожидаемое поведение таково, что полигон отображается только на map2.

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

...