Question

我正在创建一个教学文档，需要在同一页面上的多个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>

Answer 1

当您调用setMap时，它会使用新值替换多边形的“map”属性，并丢弃旧值。在这种情况下，首先将map设置为map1，然后将其替换为map2，因此预期的行为是多边形仅显示在map2上。

以下代码应该满足您的要求：

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

Google Maps v3：定义在同一页面上的多个地图中使用的叠加层

1 个答案: