0

新しくロードされたページには、で定義されているのと同じようにマップが表示されinitialize()ます。ただし、クリック<p:commandButton>すると、位置が更新されるのではなく、表示されなくなります。この作業を行う回避策の1つは、でマップを再初期化することですが、ここで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の答えは私を大いに助けました。<h:form>質問の-codeをこれに置き換えると、次のようになります。

<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>

このソリューションではajaxを使用してドロップする必要があったため、これは素晴らしいことではありませんが、少なくともある意味で機能します。私はまだより良い解決策を受け入れています。

于 2012-12-12T19:39:18.677 に答える