如何在谷歌地图上放置标记
Posted
技术标签:
【中文标题】如何在谷歌地图上放置标记【英文标题】:How to place markers on google map 【发布时间】:2011-08-15 23:54:58 【问题描述】:我使用来自primefaces 的谷歌地图工具。 我希望我的用户能够在地图上只放置一个标记。 坐标值应存储在托管 bean 变量中。
我该怎么做? 看看我到目前为止做了什么:
我创建了地图:
<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>
我还增加了保存坐标的变量:
@ManagedBean
@RequestScoped
public class NewOfferSupportController
private float mapLocationX;
private float mapLocationY;
//Get & set methods
这一切都在 primefaces page 中工作,但我有 2 个问题:
问题一:marker一旦放置,就不能再放置了。
问题 2:在地图所在的同一表单中,还有一些其他元素,例如文本字段。我注意到当我单击位于地图所在表单中的提交按钮时不会发生验证,实际上表单根本没有被提交(这在我添加地图之前没有发生),为什么地图会中断验证?
【问题讨论】:
你见过this 吗? 我确实看到了。我部分实现了它,但是当我点击地图上的某个地方时我没有看到添加菜单。我做错了什么? 能否请您在 FireFox 中加载页面并检查其错误控制台,我认为 javascript 可能存在问题 上面写着:Uncaught TypeError: Cannot set property 'value' of null
错误在第151行,即(右键查看源码):document.getElementById('lat').value = event.latLng.lat();
好像document.getElementById('lat')
返回null
,你能在HTML源码中看到,有没有这个id的元素?
【参考方案1】:
问题一:marker一旦放置,就不能再放置了。
这个问题是由以下原因引起的:
您已将纬度和经度绑定到不同的 bean (NewOfferSupportController
),而不是保存地图模型的 bean (MapBean
)。您应该使用 PrimeFaces 展示中的 MapBean
示例作为 NewOfferSupportController
bean 的设计起点。它即存储标记集。隐藏的输入必须指向该 bean,因为在 addMarker()
方法中将添加这些值。在展示示例中,您只需重命名 MapBean
类名并将视图中的 #mapBean
引用重命名为 #newOfferSupportController
。
您的 NewOfferSupportController
bean 是请求范围的,而它应该是视图范围的。
@ManagedBean
@ViewScoped
public class NewOfferSupportController implements Serializable
只要您通过 Ajax 与同一个表单进行交互,查看范围 bean 就会一直存在。但是请求范围的 bean 会在每个请求上重新创建(因此也在每个 Ajax 请求上!),从而丢弃之前放置在地图中的标记以及在添加标记之前输入的输入。
问题 2:在地图所在的同一表单中,还有一些其他元素,例如文本字段。实际上表单根本没有提交(这在我添加地图之前没有发生),为什么地图会破坏验证?
这对我有用。这可能是因为您的NewOfferSupportController
被放置在请求范围而不是视图范围中。
回顾一下,这是我在测试中使用的代码:
查看:
<p:growl id="messages" showDetail="true" />
<h:form>
<p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID" style="width:600px;height:400px"
model="#mapBean.mapModel" onPointClick="handlePointClick(event);" widgetVar="map" />
<h:inputText value="#mapBean.input" required="true" />
<p:commandButton value="submit" action="#mapBean.submit" update="messages" />
</h:form>
<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="#mapBean.lat" />
<h:inputHidden id="lng" value="#mapBean.lng" />
</h:form>
</p:dialog>
(我没有更改展示示例中的<script>
代码,只需原样添加即可)
豆子:
@ManagedBean
@ViewScoped
public class MapBean implements Serializable
private MapModel mapModel;
private String title;
private double lat;
private double lng;
private String input;
public MapBean()
mapModel = new DefaultMapModel();
public void addMarker(ActionEvent actionEvent)
mapModel.addOverlay(new Marker(new LatLng(lat, lng), title));
addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Marker Added", "Lat:" + lat + ", Lng:" + lng));
public void submit()
addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Form submitted", "Amount markers: " + mapModel.getMarkers().size() + ", Input: " + input));
public void addMessage(FacesMessage message)
FacesContext.getCurrentInstance().addMessage(null, message);
// Getters+setters.
【讨论】:
我明白了。我现在会尝试修复它。 我刚刚修好了。现在很好。按照您的说明解决了问题 1 和 2,并在我的页面中重构了不需要的东西。一个多月以来我不知道如何解决这个问题。非常感谢:) 不客气。对赏金表示感谢。我最初没有回答,因为我以前从未使用过<p:gmap>
(所以我无法从头顶回答),而且我觉得自己测试它不值得。
感谢为我的问题提供赏金的人 :) 这也是我第一次使用p:gmap
我正在考虑开始寻找替代方案,但我解决了很好问题。我很高兴我终于让这个 primefaces 工具按我的意愿工作:)以上是关于如何在谷歌地图上放置标记的主要内容,如果未能解决你的问题,请参考以下文章