Question

我正在尝试创建的是一种可以打开和关闭分支区域覆盖的表单。勾选分支名称旁边的复选框，区域显示在地图上。所以这些区域可以打开和关闭。

生成这样的区域：

// Construct the polygon.
branchcoverage = new google.maps.Polygon({
    paths: coveragecoords[0]["coords"], //Pull in x,y polygon co-ords
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: '#FF0000',
    fillOpacity: 0.35
});

branchcoverage.setMap(mymap);
branchcoverage.setMap(null); //Turn off overlay to test controls

这可能是我正在滑倒的地方，是否可以通过标准的html表单引用/控制googlemap？我并不是说嵌入到地图中的自定义html表单（如此示例 - http://predict.habhub.org/），这是一个不在DIV地图画布内的单独的html表单。即使只是简单的onclick与地图互动也是一个很好的起点：

 <a href="#" onclick="google.maps.branchcoverage.setMap(mymap);">Show coverage</a>

这是可能的还是我在错误的树上吠叫？

非常感谢您抽出时间阅读。

Answer 1

 <a href="#" id="my-element">Show coverage</a>

您可能希望使用此功能与dom进行交互。 google maps文档会介绍大部分内容

google.maps.event.addDomListener(document.getElementById('my-element').click(function(){
    branchcoverage.setMap(mymap);
}));

Answer 2

这是一个使用原始内联onclick事件处理程序的解决方案，其中一个简短函数可用于在地图上切换所有标记，折线或多边形。

function togglePoly(polyname){
    if (polyname == null || undefined || '') return;
    else {
        if (polyname.getVisible()) polyname.setVisible(false);
        else polyname.setVisible(true);
    }
}

内联使用......

<a href="#" id="my-element" onclick="togglePoly('branchcoverage');">Show/Hide coverage</a>

脚本使用......

google.maps.event.addDomListener(document.getElementById('my-element').click(togglePoly('branchcoverage')));

这是因为Google地图标记和多边形是Google MVC对象的扩展，因此也可以使用MVC对象的所有可用方法。

控制Google Map V3叠加层

2 个答案: