如何在谷歌地图上放置标记

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>  

(我没有更改展示示例中的&lt;script&gt; 代码,只需原样添加即可)

豆子:

@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,并在我的页面中重构了不需要的东西。一个多月以来我不知道如何解决这个问题。非常感谢:) 不客气。对赏金表示感谢。我最初没有回答,因为我以前从未使用过&lt;p:gmap&gt;(所以我无法从头顶回答),而且我觉得自己测试它不值得。 感谢为我的问题提供赏金的人 :) 这也是我第一次使用p:gmap 我正在考虑开始寻找替代方案,但我解决了很好问题。我很高兴我终于让这个 primefaces 工具按我的意愿工作:)

以上是关于如何在谷歌地图上放置标记的主要内容,如果未能解决你的问题,请参考以下文章

只允许用户在谷歌地图上放置 1 个标记

如何在谷歌地图上一一加载标记动画[重复]

如何在谷歌地图上获取图像视图坐标(位置/纬度)

当我在谷歌地图上标记时如何获取地址的所有详细信息。然后它将在颤动中填充文本框

怎么在谷歌地图上做标记呀

用户如何在谷歌地图颤振上添加多个标记