Google Map消失而不是更新

Question

The freshly loaded page shows the map just like defined in initialize() . 刚加载的页面显示地图，就像在initialize()定义的一样。 But a click on the <p:commandButton> just makes it disappear instead of updating the position. 但是单击<p:commandButton>只会使其消失而不是更新位置。 One workaround that does the job is to just reinitialize the map in codeAddress() , but that's just sleazy because I see no reason why it should work any different from the way it does here . 可以完成此工作的一种解决方法是仅在codeAddress()重新初始化映射，但这只是很codeAddress() ，因为我认为没有理由认为它应该与此处的工作方式有所不同。

the jsf code: 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>

the test.js: 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);
          }

        });
      }

Answer 1

I suspect that is because of a reload on the page. 我怀疑是由于页面上的重新加载。 How about adding a return false; 如何添加return false; after your oncomplete="codeAddress(); ? 在您的oncomplete="codeAddress(); ？

Like- 喜欢-

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

Answer 2

Cdeez answer helped me a lot. Cdeez的回答对我很有帮助。 Replacing the <h:form> -code from the question with this did the trick: 用这个替换问题中的<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>

It's not great because for this solution I had to drop using ajax, but at least it works in a way. 这不是很好，因为对于此解决方案，我不得不放弃使用ajax，但至少它以某种方式起作用。 I am still open to better solutions. 我仍然愿意寻求更好的解决方案。

Google Map消失而不是更新

问题描述

2 个解决方案

解决方案1
1 2012-11-23 04:03:49

解决方案2
0 已采纳 2012-12-12 19:39:18

Google Map消失而不是更新

问题描述

2 个解决方案

解决方案1 1 2012-11-23 04:03:49

解决方案2 0 已采纳 2012-12-12 19:39:18

解决方案1
1 2012-11-23 04:03:49

解决方案2
0 已采纳 2012-12-12 19:39:18