Javascript 在google地图多段线和多边形之间切换

根据本文中的答案，我绘制了一条示例google地图多段线，如中所示。 在这里，我尝试基于单选按钮在多段线和多边形之间切换。 我试着制作另一个多边形数组

 polygon= new goo.Polygon({
               paths: [],
               geodesic: true,
               strokeColor: '#FF0000',
               strokeOpacity: 1.0,
               strokeWeight: 2
           }),

并尝试通过单击单选按钮绘制地图

if($("#polyline").is(":checked")) {
line.setMap(map);
} else {
polygon.setMap(map);
}

此外，我还在每个事件中使用适当的坐标设置

polygon.getpath（）

。但它给出了一些错误信息

代码片段（来自注释中）：

var行=[]；
var多边形=[]；
var Latlngs=[]；
var路径；
函数initMap（）{
var-goo=google.maps；
map=new goo.map（document.getElementById（'map'）{
缩放：10，
中心：新固拉顿（12.8799313333,77.5991386667）
});
直线=新的粘性多段线({
路径：[]，
测地线：正确，
strokeColor:“#FF0000”，
笔划不透明度：1.0，
冲程重量：2，
地图：地图
});
多边形=新的粘性多边形({
路径：[]，
测地线：正确，
strokeColor:“#FF0000”，
笔划不透明度：1.0，
冲程重量：2，
地图：地图
});
markers=新的goo.MVCArray；
goo.event.addListener（映射，'click'，函数（e）{
变量标记=新的粘液标记({
职位：e.latLng，
地图：地图，
德拉格布尔：是的
});
标记器。推（标记器）；
//将新点推送到路径
line.getPath（）.push（marker.getPosition（））；
polygon.getpath（）.push（marker.getPosition（））；
addListener（标记'dragend'，函数（）{
//只需更新路径
line.getPath（）.setAt（markers.indexOf（this），
这个.getPosition（））；
polygon.getpath（）.setAt（markers.indexOf（this），
这个.getPosition（））；
});
addListener（标记'dblclick'，function（）{
//删除标记和路径点
line.getPath（）.removeAt（markers.indexOf（this））；
polygon.getpath（）.removeAt（markers.indexOf（this））；
markers.removet（markers.indexOf（this））；
this.setMap（null）
});
});
$（“radBut输入”）。单击（函数（）{
if（$（this.id==“polygon”）{
多边形.setMap（map）；
line.setPath（[]）；
}否则{
line.setMap（map）；
多边形集合路径（[]）；
}
});
}
google.maps.event.addDomListener（窗口'load'，initMap）
html，
身体{
身高：100%；
保证金：0；
填充：0；
}
#地图{
身高：100%；
}

多段线
多边形


我创建了一个工作小提琴，您可以根据代码在多段线和多边形之间切换

我必须对您的代码进行一些更改才能使其正常工作：

一,。使用多边形的
path
属性，而不是
path
二,。将多边形对象的贴图设置为null，以停止在多段线顶部渲染多边形（因为单选按钮设置为“多段线”）

iii.更改
polygon.getpath（）.push（marker.getPosition（））中的代码行
to
polygon.getPath（）.push（marker.getPosition（））因为我们现在使用的是path属性（不是path）

iv.将dragend和dblclick事件处理程序更改为使用
polygon.getPath（）
而不是
polygon.getPath（）
：

iv.将
$（“radBut输入”）
事件处理程序修改为：

$("#radBut input").click( function() {
    if($(this).attr('id') == "polygon") {
        polygon.setMap(map);
        line.setMap(null);
    } else {
        line.setMap(map);
        polygon.setMap(null);
    }
});

请注意，jQuery CSS选择器现在是
$（“#radBut input”）
而不是
$（“radBut input”）
，我们使用
$（this）.attr（'id'）
来获取所选单选按钮的id。此外，无需将多段线或多边形路径设置为空阵列（这将清除多边形或阵列点）。而是使用
setMap（null）将从地图中删除多段线或多边形，但保留阵列中的点。
错误消息是什么？请提供一个演示错误的示例。请在绘制多段线后查看控制台日志。为什么不使用DrawingManager，请查看此示例谢谢。你的样品按要求很好。我还添加了一个按钮来清除地图。但不起作用。请参阅相关的编辑。小提琴：使用'markers=new goo.MVCArray；`当点击按钮并正常工作时。样本：
goo.event.addListener(marker, 'dragend', function () {
    ...
    polygon.getPath().setAt(markers.indexOf(this), this.getPosition());
 });

goo.event.addListener(marker, 'dblclick', function () {
    ...
    polygon.getPath().removeAt(markers.indexOf(this));
    ...
});

$("#radBut input").click( function() {
    if($(this).attr('id') == "polygon") {
        polygon.setMap(map);
        line.setMap(null);
    } else {
        line.setMap(map);
        polygon.setMap(null);
    }
});