GMap信息窗口不显示

时间:2016-03-24 16:59:24

标签: java google-maps jsf java-ee primefaces

我试图实现此功能(GMap - Info Window )在我的网站上。

标记工作但信息窗口永远不会显示。 我尝试在applicationContext.xml中为InfoWindowView.java添加带有id和class的bean,结果相同。

我感谢任何帮助。

InfoWindowView.java

package com.examplej2eeapp.gmap;

import java.io.Serializable;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

import org.primefaces.event.map.OverlaySelectEvent;
import org.primefaces.model.map.DefaultMapModel;
import org.primefaces.model.map.LatLng;
import org.primefaces.model.map.MapModel;
import org.primefaces.model.map.Marker;

@ManagedBean
@ViewScoped
public class InfoWindowView implements Serializable {

    /**
     * 
     */
    private static final long serialVersionUID = -4986785986810420408L;

    private MapModel advancedModel;

    private Marker marker;

    @PostConstruct
    public void init() {
        advancedModel = new DefaultMapModel();

        //Shared coordinates
        LatLng coord1 = new LatLng(36.879466, 30.667648);
        LatLng coord2 = new LatLng(36.883707, 30.689216);
        LatLng coord3 = new LatLng(36.879703, 30.706707);
        LatLng coord4 = new LatLng(36.885233, 30.702323);

        //Icons and Data
        advancedModel.addOverlay(new Marker(coord1, "Konyaalti", "webapp/css/images/gps.jpg", "http://maps.google.com/mapfiles/ms/micons/blue-dot.png"));
        advancedModel.addOverlay(new Marker(coord2, "Ataturk Parki", "webapp/css/images/gps.jpg"));
        advancedModel.addOverlay(new Marker(coord4, "Kaleici", "webapp/css/images/gps.jpg", "http://maps.google.com/mapfiles/ms/micons/pink-dot.png"));
        advancedModel.addOverlay(new Marker(coord3, "Karaalioglu Parki", "webapp/css/images/gps.jpg", "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"));
    }

    public MapModel getAdvancedModel() {
        return advancedModel;
    }

    public void onMarkerSelect(OverlaySelectEvent event) {
        marker = (Marker) event.getOverlay();
    }

    public Marker getMarker() {
        return marker;
    }
}

accountHome.xhtml

<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui"
        template="/WEB-INF/templates/general.xhtml">



    <ui:define name="title"><h:outputText value="My account Home" /></ui:define>
    <ui:define name="header"><h:outputText value="My account Home" /></ui:define>

    <ui:define name="content">
        <f:metadata>
            <f:event type="postAddToView" listener="#{uiUtils.greetOnViewLoad}" update="growlMessages" />
            <f:attribute name="firstName" value="#{user.firstName}" />
            <f:attribute name="lastName" value="#{user.lastName}" />
        </f:metadata>



    <h1>Account of #{user.firstName} #{user.lastName} </h1>
     <f:view>
        <h:head>
            <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
        </h:head>

        <h:body>

<h:form>  
    <p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID" model="#{infoWindowView.advancedModel}" style="width:100%;height:400px">

        <p:ajax event="overlaySelect" listener="#{infoWindowView.onMarkerSelect}" />

        <p:gmapInfoWindow id="infoWindow">
            <p:outputPanel style="text-align: center; display: block; margin: auto">

                      <p:graphicImage name="webapp/css/images/#{infoWindowView.marker.data}" height="150" />

                    <br />
                    <h:outputText value="#{infoWindowView.marker.title}" />

            </p:outputPanel>
        </p:gmapInfoWindow>
    </p:gmap>


</h:form>


        </h:body>
    </f:view>


    </ui:define>


</ui:composition>

1 个答案:

答案 0 :(得分:1)

InfoWindowView.java

只需使用下面的这一行脚本示例,然后一切正常。

advancedModel.addOverlay(new Marker(coord1, "Konyaalti", "gps.jpg", "http://maps.google.com/mapfiles/ms/micons/blue-dot.png"));