控制 Google 地图 V3 叠加层

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 表单 reference/control googlemap？我的意思不是自定义 html 表单嵌入 into/onto 地图（如本例 - http://predict.habhub.org/），而是不在 [=30= 内的单独 html 表单] 地图 canvas。即使获得一个简单的 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 地图 V3 叠加层

Control Google Map V3 overlays

html

javascript

google-maps

google-maps-api-3