时间戳

首页 > 解决方案 > Primefaces GMap地理编码事件未显示标记

primefaces - Primefaces GMap地理编码事件未显示标记

问题描述

当用户输入地址并按下按钮时，Primefaces 地理编码事件成功更改并居中地图，但地图不显示关联的标记。如何使该标记可见？

html代码：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=..."></script>

<h:form id="direccionForm">
    <p:inputText id="address" />
    <p:commandButton value="Localizar" icon="fa fa-search" onclick="geocode()" type="button" />
    <p:gmap id="gmap" widgetVar="_gmap" center="#{manejadorComercio.gmapComercio.centerGeoMap}" zoom="15" type="hybrid" style="width:600px;height:400px" model="#{gmapComercio.model}" >
        <p:ajax event="geocode" listener="#{manejadorComercio.gmapComercio.onGeocode}" update="@this" />
    </p:gmap>
</h:form>

JS代码：

function geocode() {
    var address = document.getElementById('direccionForm:address').value;
    PF('_gmap').geocode(address);
}

Java代码：

import org.jboss.seam.ScopeType;
import org.jboss.seam.annotations.Scope;

@Name( "manejadorComercio" )
@Scope( ScopeType.CONVERSATION )
public class ManejadorComercio implements Serializable {

    private GMapComercioModel gmapComercio;

    @Create
    public void inicializa() {    
        gmapComercio = new GMapComercioModel();
    }
}

public class GMapComercioModel {

    private MapModel model = new DefaultMapModel();
    private String centerGeoMap = "40.4530541, -3.6905332";

    public GMapComercioModel() {
        model.addOverlay(new Marker(new LatLng(40.4530541, -3.6905332), "Bernabeu"));
    }

    public void onGeocode(GeocodeEvent event) {
        List<GeocodeResult> results = event.getResults();

        if (results != null && !results.isEmpty()) {
            LatLng center = results.get(0).getLatLng();
            centerGeoMap = center.getLat() + "," + center.getLng();

            for (int i = 0; i < results.size(); i++) {
                GeocodeResult result = results.get(i);
                model.addOverlay(new Marker(result.getLatLng(), result.getAddress()));
            }
        }
    }
}

提前致谢。

标签： primefacesprimefaces-gmap

解决方案

愚蠢的错误，p：gmap组件的“模型”属性应该是

model="#{manejadorComercio.gmapComercio.model}

代替

model="#{gmapComercio.model}".

这样就可以了。

推荐阅读