Question

我正在使用谷歌地图api V3。我有一个像素数组，就像这个Link's变量'triangleCoords'一样。

我使用按钮点击动态生成地图..

我希望将相同的多边形放在所有地图中。

在我尝试时，Polygon仅显示在生成的最新地图上。

我希望多边形与Image Link

中的一样

Answer 1

您只能将google.maps.Polygon添加到一个地图。如果您有多个地图，则需要为每个地图制作一个。

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

    var bermudaTriangle;

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


    var triangleCoords = [
        new google.maps.LatLng(25.774252, -80.190262),
        new google.maps.LatLng(18.466465, -66.118292),
        new google.maps.LatLng(32.321384, -64.75737),
        new google.maps.LatLng(25.774252, -80.190262)
    ];

    // Construct the polygon
    var bermudaTriangle1 = new google.maps.Polygon({
      paths: triangleCoords,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });
    var bermudaTriangle2 = new google.maps.Polygon({
      map: map2,
      paths: triangleCoords,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });
    var bermudaTriangle3 = new google.maps.Polygon({
      map: map3,
      paths: triangleCoords,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });

    bermudaTriangle1.setMap(map);
  }

example

如何在同一页面中不同div中出现的2个地图上显示相同的多边形

1 个答案: