0

新加载的页面显示的地图就像定义在initialize(). 但是单击<p:commandButton>只是使其消失而不是更新位置。完成这项工作的一种解决方法是在 中重新初始化地图codeAddress()，但这只是低俗的，因为我看不出它的工作方式与这里的方式有什么不同。

jsf代码：

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<h:head>
    <script
        src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
</h:head>
<h:body>
    <h:outputScript library="js" name="test.js" />
    <body onload="initialize()" />

    <h:form id="geo">
        <p:inputText id="address" />
        <p:commandButton value="Geocode" oncomplete="codeAddress();"
            update=":geo" />
        <div style="height: 400px; width: 400px; float: right;"
            id="map_canvas"></div>
    </h:form>
</h:body>
</html>

test.js：

var geocoder;
      var map;
      function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(53.5510846, 9.99368179999999);
        var mapOptions = {
          zoom: 10,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

      }

      function codeAddress() {
        var address = document.getElementById('geo:address').value;

        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            alert(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }

        });
      }
4

2 回答 2

1

我怀疑这是因为页面上重新加载。return false;在你的之后添加一个怎么样oncomplete="codeAddress();？

喜欢-

<p:commandButton value="Geocode" oncomplete="codeAddress(); return false;" update=":geo" />

于 2012-11-23T04:03:49.587 回答
0

Cdeez answer helped me a lot. Replacing the <h:form>-code from the question with this did the trick:

<h:form id="geo">
    <p:inputText id="address" />
    <p:commandButton value="Geocode" oncomplete="codeAddress(); return false;" ajax="false"/>
</h:form>
    <div style="height: 400px; width: 400px; float: right;" id="map_canvas"></div>

It's not great because for this solution I had to drop using ajax, but at least it works in a way. I am still open to better solutions.

于 2012-12-12T19:39:18.677 回答