无法使用 Google Map API V2 绘制多边形答案

【问题标题】：Can not Draw a polygon using Google Map API V2无法使用 Google Map API V2 绘制多边形
【发布时间】：2013-12-05 06:35:02
【问题描述】：

我有以下功能，我正在尝试绘制具有特定纬度的多边形

function AddTile( minLat, minLon, maxLat, maxLon )
        {
            var points      = [];


            points.push( new GLatLng( parseFloat(maxLat),   parseFloat(maxLon)  ));
            points.push( new GLatLng( parseFloat(minLat),   parseFloat(maxLon)  ));
            points.push( new GLatLng( parseFloat(minLat),   parseFloat(minLon)  ));
            points.push( new GLatLng( parseFloat(maxLat),   parseFloat(minLon)  ));               
            var polygon = new GPolygon(points, "#f33f00", 5, 1, "#ff0000", 0.2);
        map.addOverlay(polygon);


    //map.addOverlay(new GPolyline(points,'#8080FF', 8, 0.5, '#8080FF', 0.5));


        }

但无法在地图上绘制多边形。然而，可以绘制多段线，显示这些线之间有间隙。我想从你那里知道的是我的谷歌地图 API 是否不再支持绘制多边形。我正在使用谷歌地图 API V2。如果有办法对此进行排序，请描述。此外，如果无法绘制多边形，那么我如何使用新的 GPolyline() 构造来绘制没有任何间隙的折线和背景颜色以消除线条的间隙。我尝试将权重设置为 10，这会使线条更加坚固，从而使我不想要的不透明。请指导。谢谢你

【问题讨论】：

你为什么使用deprecated (and turned off) Google Maps Javascript API v2。你应该为Google Maps Javascript API v3开发
如果我们转换为 API v3 会怎样。我们在 V2 中构建的现有架构会起作用吗？
什么“架构”？到目前为止，您发布的代码是 v3 的简单移植。这两个 API 有很大的不同，以至于移植一些功能需要工作，但是支持 v3，不支持 v2，并且不能保证它会继续工作。 v3 的 v2 包装器不（也永远不会）支持完整的 v2 功能，它就是这样。
如果我们使用折线。我们可以缩小线条之间的差距吗？我们可以有一个不透明的背景吗？

标签： google-maps google-maps-api-2

【解决方案1】：

geocodezip 建议您应该使用 API v3。下面我已将您使用旧（已弃用）v2 函数（如 GLatLng、GPolygon）的代码转换为 v3 等效项。看看有没有效果

function AddTile( minLat, minLon, maxLat, maxLon)
{
    var mapOptions = {
                      zoom: 4,
                      center: new google.maps.LatLng( 5.44, 22.67),  // set centre somewhere in Africa
                      mapTypeId: google.maps.MapTypeId.TERRAIN
                      };     
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var points      = [];
    points.push( new google.maps.LatLng( parseFloat(maxLat), parseFloat(maxLon) ));
    points.push( new google.maps.LatLng( parseFloat(minLat), parseFloat(maxLon) ));
    points.push( new google.maps.LatLng( parseFloat(minLat), parseFloat(minLon) ));
    points.push( new google.maps.LatLng( parseFloat(maxLat), parseFloat(minLon) ));
    points.push( new google.maps.LatLng( parseFloat(maxLat), parseFloat(minLon) ));  // same as your 1st point, // polygons should be closed

    // Draw polygon.
    var polygon = new google.maps.Polygon({
                      paths: points,
                      strokeColor: '#f33f00',
                      strokeOpacity: 1,
                      strokeWeight: 5,
                      fillColor: '#ff0000',
                      fillOpacity: 0.2
                   });
    polygon.setMap(map);

    google.maps.event.addListener(map, 'click', function(event){
       alert('whatever you want to do');
    });  // in case you want to do something on user click
}

【讨论】：