Wie kann man die Marker auf einer google map
Benutze ich die google-map-tool von primefaces.
Ich möchte, dass meine Benutzer in der Lage, nur eine Markierung auf einer Karte.
Die Werte für die Koordinaten sollten gespeichert werden, in einer managed-bean-Variablen.
Wie kann ich das tun?
Siehe, was ich getan habe so weit:
Ich die map erstellt:
<f:view contentType="text/html">
<p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID"
style="width:600px;height:400px"
model="#{mapBean.emptyModel}"
onPointClick="handlePointClick(event);"
widgetVar="map" /> </f:view>
<p:dialog widgetVar="dlg" effect="FADE" effectDuration="0.5" close="false" fixedCenter="true">
<h:form prependId="false">
<h:panelGrid columns="2">
<h:outputLabel for="title" value="Title:" />
<p:inputText id="title" value="#{mapBean.title}" />
<f:facet name="footer">
<p:commandButton value="Add"
actionListener="#{mapBean.addMarker}"
update="messages"
oncomplete="markerAddComplete()"/>
<p:commandButton value="Cancel" onclick="return cancel()"/>
</f:facet>
</h:panelGrid>
<h:inputHidden id="lat" value="#{newOfferSupportController.mapLocationX}" />
<h:inputHidden id="lng" value="#{newOfferSupportController.mapLocationY}" />
</h:form>
</p:dialog>
<script type="text/javascript">
var currentMarker = null;
function handlePointClick(event) {
if(currentMarker == null) {
document.getElementById('lat').value = event.latLng.lat();
document.getElementById('lng').value = event.latLng.lng();
currentMarker = new google.maps.Marker({
position:new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())
});
map.addOverlay(currentMarker);
dlg.show();
}
}
function markerAddComplete() {
var title = document.getElementById('title');
currentMarker.setTitle(title.value);
title.value = "";
currentMarker = null;
dlg.hide();
}
function cancel() {
dlg.hide();
currentMarker.setMap(null);
currentMarker = null;
return false;
}
</script>
Ich auch greated die Variablen, die die Koordinaten:
@ManagedBean
@RequestScoped
public class NewOfferSupportController {
private float mapLocationX;
private float mapLocationY;
//Get & set methods
Es funktioniert alles wie im primefaces Seite aber ich habe 2 Probleme:
Problem 1: Sobald der marker platziert ist, können Sie es nicht wieder gelegt.
Problem 2: In der gleichen form, wo die Karte ist, gibt es einige andere Elemente wie text-Felder. Ich bemerkte, dass die überprüfung nicht Auftritt, wenn ich auf den submit-button befindet sich im Formular, wo die Karte ist, die Eigentlich in der form nicht vorgelegt bekommen(Das hat nicht auftreten, bevor ich Sie Hinzugefügt der Karte), warum ist die Karte Störung der Validierung?
- Haben Sie gesehen, dieser ?
- Ich habe zu sehen, dass. Und ich teilweise umzusetzen, aber ich sehe nicht, das Menü "hinzufügen" wenn ich auf irgendwo auf der Karte. Was habe ich falsch gemacht?
- Kannst du bitte laden Sie die Seite in FireFox und überprüfen Sie die Fehler-Konsole, ich denke, es könnte ein Problem mit javascript
- Es sagt:
Uncaught TypeError: Cannot set property 'value' of null
Der Fehler ist in Zeile 151, das ist(Rechtsklick-Quelltext anzeigen):document.getElementById('lat').value = event.latLng.lat();
- Es scheint
document.getElementById('lat')
zurücknull
, können Sie sehen, in der HTML-Quelle , gibt es ein element mit dieser id ? - Das einzige, was ich sehe mit der id lat:
<h:inputHidden id="lat"
Im browser sehe ich es als<input id="j_idt17:lat" type="hidden" name="j_idt17:lat" value="0.0" />
- Oh.. ja, fügen Sie einfach
prependId="false"
in deinem <h:form> wie<h:form prependId="false">
- Ich fügte hinzu, dass, jetzt sehe ich keine Fehler in der Konsole angezeigt, aber der dialog für das hinzufügen der marker immer noch nicht angezeigt, wenn ich Sie irgendwo. Wenn ich Doppel Klick auf die Karte nur vergrößert.
- Ich habe gerade versucht, ändern Sie den Wert von
p:dialog widgetVar="dlg"
zup:dialog widgetVar="dlg2"
den inneren dialog hatte den gleichen Wert wie die äußere. Ich dachte, das machen vielleicht einige Konflikte, so wird es nicht angezeigt, wenn klicken Sie auf die Karte, aber funktioniert immer noch nicht. - ja, halten die beiden anderen Namen auch ich nicht verstehen, die Notwendigkeit, verschachtelte Dialoge .
- Ich wollte die Karte als popup-dialog. Ich habe gerade aus meinem Kopf, ich entfernt die popup-Dialogfeld aus, und es funktioniert einwandfrei. Aber sobald ich Sie platziert die marker-ich kann nicht platzieren Sie es erneut. Wie könnte ich das tun?
- wieder, können Sie einen Fehler sehen, wenn Sie re versuchen ?
- Ja, ich sehe einige Fehler. Ich habe gerade aktualisiert meine Frage mit etwas mehr details.
- sind diese letzten Fehler ?
- Ja, Sie kamen einfach. als ich begann, hinzufügen der Karte. Oh Nein, etwas ist falsch, ich gerade entfernt alle der code, den ich Hinzugefügt, im Zusammenhang mit der Karte, und diese Fehler sind immer noch da. Warum ist das so?
- Wohl das Problem ist, da diese fehlenden
.js
, können Sie bitte stellen Sie Sie zur Seite - Werde ich haben, um das zu beheben, bevor ich weiterhin mit der Karte. Ich gehen versuchen, es zu beheben.
- Ich fest, dass. Nun ich sehe nicht ein, diesen Fehler in der browser-Konsole. Wenn ich auf die Karte klicken, wird der dialog für die Platzierung der marker erscheint. Aber wenn ich den marker kann ich nicht abschicken. Auch ich kann nicht Bearbeiten Sie die marker-position einmal platziert.
- Wenn das problem immer noch nicht gelöst, es könnte sich lohnen es zu posten gis.stackexchange.com,, das spezialisiert ist in geographischen Sachen.
- Was JSF-impl/version? Was die PF-version?
- Ich verwende JSF 2.0 und meine Primefaces version ist 2.2.1
- "JSF 2.0" ist ein spec-version, die sagt nichts über die impl/version verwendet. Kann ich davon ausgehen, dass Sie mit Mojarra 2.0.x?
- Ja, ich denke, das ist, was ich verwenden.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Dieses problem wird durch die folgenden Dinge:
Haben Sie gebunden, breiten-und Längengrad zu einer anderen bean (
NewOfferSupportController
) als die Bohne enthält das map-Modell (MapBean
). Sie sollten mitMapBean
Beispiel im PrimeFaces showcase als design Ausgangspunkt fürNewOfferSupportController
bean. Es speichert nämlich die Markierungen setzen. Die hidden-inputs zeigen Sie auf, dass die Bohne, weil in deraddMarker()
Methode, die diese Werte Hinzugefügt werden. Aus dem showcase Beispiel Sie müssen nur benennen Sie dieMapBean
Klasse Namen, und benennen Sie#{mapBean}
Referenzen in der Ansicht von#{newOfferSupportController}
.Ihre
NewOfferSupportController
bean request-scoped zwar sollte es sein, die Sicht beschränkt.Ansicht scoped beans so lange Leben, wie Sie interagieren mit der gleichen form von Ajax. Aber request-scoped-beans neu bekommen auf jede Anfrage (und somit auch bei jeder Ajax-Anfrage!), hiermit löschen Sie die Markierungen, die platziert werden, bevor Sie in die Karte und Eingänge, die eingegeben werden, bevor hinzufügen von Markern.
Dies funktioniert für mich. Dies ist wahrscheinlich verursacht, weil Ihre
NewOfferSupportController
ist gestellt worden in der Anfrage Umfang, anstatt den Blick Rahmen.Zur Erinnerung, hier ist der code welche ich in meinem test:
anzeigen:
(Ich habe nicht ändern die
<script>
- code im Schaukasten Beispiel, fügen Sie es einfach unverändert)Bean:
<p:gmap>
vor (damit ich nicht beantworten kann, von der Oberseite des Kopfes) und ich fand es nicht der Mühe Wert, zu testen es selbst.p:gmap
ich dachte im ab zu finden, eine alternative, aber ist toll ich das Problem gelöst. Ich bin froh, dass ich endlich aus diesem primefaces-tool zu arbeiten, wie ich möchte 🙂