Google maps 在谷歌地图中切换覆盖

我正在使用PrimeFacesGMAP来显示标记和一些标记上的圆圈覆盖。我想在单击按钮时切换圆形覆盖。你知道我怎么做吗？我使用的是JSF2.2和PrimeFaces3.4.2

这就是我在jsf页面中加载映射的方式

<p:gmap center="21, 78" id="map" 
zoom="2" 
type="roadmap"
style="width:99%;height:90%;position:absolute"
model="#{SCNBean.supplyChainMapModel}"
widgetVar="mapVar">

下面是如何使用javascript创建地图上的按钮

function HeatMapControl(heatMapControlDiv, gmap) {
    heatMapControlDiv.style.padding = '5px';                                        
    var controlUI = document.createElement('div');
    controlUI.title = 'Heat Map';
    heatMapControlDiv.appendChild(controlUI);
    var controlText = document.createElement('div');
    controlText.innerHTML = '<strong>Heat Map</strong>';
    controlUI.appendChild(controlText);
    google.maps.event.addDomListener(controlUI, 'click', function() {
                                        heatmap.setMap(heatmap.getMap() ? null : gmap);
                                    });

功能热图控制（热图控制div，gmap）{
heatMapControlDiv.style.padding='5px'；
var controlUI=document.createElement（'div'）；
controlUI.title=‘热图’；
heatMapControlDiv.appendChild（controlUI）；
var controlText=document.createElement（'div'）；
controlText.innerHTML='热图'；
controlUI.appendChild（controlText）；
google.maps.event.addDomListener（controlUI，'click'，function（）{
heatmap.setMap（heatmap.getMap（）？null:gmap）；
});

---

我想通过单击地图上的按钮来切换圆形覆盖。我如何实现这一点？

我会将地图模型移动到一个requestScoped Bean，我们称之为SomeRequestScopedMapBean

@PostConstruct
public void drawMapModel(){
for (Node node : sCNBean.supplyChainNodes) {
    LatLng coord = new LatLng(node.getLatitude(), node.getLongitude());
    marker = new Marker(coord, node.getAddress(), node, getMarkerIcon(node.getNodeType()));
    supplyChainMapModel.addOverlay(marker);

    if(sCNBean.showCircles){
        //adding circle overlay
        Circle circle1 = new Circle(coord, riskval*10000);  
        circle1.setStrokeColor("#d93c3c");  
        circle1.setFillColor("#d93c3c");  
        circle1.setFillOpacity(0.7);
        supplyChainMapModel.addOverlay(circle1);
    }
}

它应该作为ManagedProperty引用当前bean

您的xhtml可以这样工作：（我认为不需要用javascript创建它，但我用commandButton编辑它）

MapModel构造将移动到SomeRequestScopedMapBean

@PostConstruct
public void drawMapModel(){
for (Node node : sCNBean.supplyChainNodes) {
    LatLng coord = new LatLng(node.getLatitude(), node.getLongitude());
    marker = new Marker(coord, node.getAddress(), node, getMarkerIcon(node.getNodeType()));
    supplyChainMapModel.addOverlay(marker);

    if(sCNBean.showCircles){
        //adding circle overlay
        Circle circle1 = new Circle(coord, riskval*10000);  
        circle1.setStrokeColor("#d93c3c");  
        circle1.setFillColor("#d93c3c");  
        circle1.setFillOpacity(0.7);
        supplyChainMapModel.addOverlay(circle1);
    }
}

---

既然你显然不能在p:gmap中添加按钮，那么“点击地图上的按钮”是什么意思？也许你指的是一些点击事件，比如onOverlaySelect？或者gmap之外的commandButton，它将打开/关闭所有的圆形覆盖层？另外，你的支持bean的范围是什么？我已经使用javascript添加了一个按钮。bean是视图范围。按钮的源代码？你在支持bean中捕获到按钮操作了吗？Also考虑到一个Vistabean bean不适合于它的MMAP模型的P:GMAP。考虑一个请求域BeANI将PosithMaMod模型添加到原始查询的源代码中。如果我在bean中获得点击事件，有可能使覆盖出现和消失而不重新创建地图E。很长时间？但是我每次都要重新创建地图，这会很昂贵，因为我必须点击数据库，读取每个开关上重建地图所需的节点和其他细节。我想如果没有更好的方法，我将不得不采用这种方法，但有没有办法避免这种情况？我看到了javascript中的解决方案，但我无法适应这种情况因为我是通过支持bean构建覆盖的。不需要每次都点击数据库。你可以在创建和提供供应链节点的ViewScoped bean中这样做一次。requestScoped bean只在你每次绘制p:gmap时绘制标记。太好了。谢谢。

    public void toggleShowCircles(){
    if(showCircles)
        showCircles = false;
    else 
        showCircles = true;
}

@PostConstruct
public void drawMapModel(){
for (Node node : sCNBean.supplyChainNodes) {
    LatLng coord = new LatLng(node.getLatitude(), node.getLongitude());
    marker = new Marker(coord, node.getAddress(), node, getMarkerIcon(node.getNodeType()));
    supplyChainMapModel.addOverlay(marker);

    if(sCNBean.showCircles){
        //adding circle overlay
        Circle circle1 = new Circle(coord, riskval*10000);  
        circle1.setStrokeColor("#d93c3c");  
        circle1.setFillColor("#d93c3c");  
        circle1.setFillOpacity(0.7);
        supplyChainMapModel.addOverlay(circle1);
    }
}