Google 地图在 APEX 区域消失

Question

我正在尝试在我的一个顶点页面区域中显示地图，该地图将具有可拖动标记，该标记链接到其他区域的文本字段并显示纬度和经度的地理编码。一切正常，除了地图只出现 0.5 秒然后消失的一件事。我认为问题出在编码中的某个地方，因为我有其他类似的程序，其中地图工作得很好。我正在使用 PL/SQL 从数据库中的过程中检索地图。

这是我的程序：

create or replace PROCEDURE SHOW_LOCATION (
    map_div IN VARCHAR2 DEFAULT 'map-canvas',
    issue_street_address IN VARCHAR2,
    issue_post_code IN VARCHAR2,
    city IN VARCHAR2,
    lat_item IN VARCHAR2,
    long_item IN VARCHAR2)
is
    a_mapstr VARCHAR2 (32000);
begin
    a_mapstr := '

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">   </script>
<script type="text/javascript">
    var map;
    var marker;
    function initialize(myAddress, myLat, myLng) {
        var mapOptions = {
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }    
        map = new google.maps.Map(document.getElementById('||''''|| map_div   ||''''||'),mapOptions);
        geocoder = new google.maps.Geocoder();
        geocoder.geocode( { '||''''||'address'||''''||': myAddress},   function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var markerOptions = {
                    map: map,
                    draggable: true,
                    animation: google.maps.Animation.DROP,
                    flat: false,
                    position: results[0].geometry.location
                }
                map.setCenter(results[0].geometry.location);
                marker = new google.maps.Marker(markerOptions);
                google.maps.event.addListener(marker, '||''''||'dragstart'||''''||', function() {map.closeInfoWindow();} );
                google.maps.event.addListener(marker, '||''''||'dragend'||''''||', function(event) {
                  document.getElementById("'||lat_item||'").value=event.latLng.lat();
                   document.getElementById("'||long_item||'").value=event.latLng.lng();
                });
            } 
            else {
                document.getElementById("'||map_div||'").innerHTML = "No mapdata found for given address. Did you enter a correct address?";
            }
        });
    }

    google.maps.event.addDomListener(window, ''load'', initialize);
</script>';
--

sys.htp.p (a_mapstr);
EXCEPTION
    WHEN OTHERS
    THEN
        raise_application_error (-20000, 'error in show_map: ' || SQLERRM);
  END SHOW_LOCATION;

这是我PL/SQL要调用的程序：

SHOW_LOCATION('map_canvas','P20_ISSUE_STREET_NAME','P20_ISSUE_POST_CODE','P20_CITY','P20_LONGITUDE','P20_LATITUDE');
sys.htp.p('<script type="text/javascript">');
sys.htp.p('initialize('||''''||'Leidscheplein, Amsterdam,NL'||''''||');');
sys.htp.p('</script>');

这是我的 html 区域代码：

<div align="center" style="width: 100%; height: 300px;">
<div id="map_canvas" style="width: 500px; height: 300px"></div>

Answer 1

在您的程序代码中：

google.maps.event.addDomListener(window, ''load'', initialize);

在你的通话中：

SHOW_LOCATION('map_canvas','P20_ISSUE_STREET_NAME','P20_ISSUE_POST_CODE','P20_CITY','P20_LONGITUDE','P20_LATITUDE');
sys.htp.p('<script type="text/javascript">');
sys.htp.p('initialize('||''''||'Leidscheplein, Amsterdam,NL'||''''||');');
sys.htp.p('</script>');

于是区域被渲染，程序代码被调用。在此代码中是在文档 onload 事件上注册的调用。显然，此时文件还没有准备好。
其次，你运行一个再次初始化地图的脚本。这个将实例化，因为它不会延迟到加载事件。
不久之后，文档已经生成并且 onload 将触发，没有参数。我怀疑这会导致地图短暂出现然后突然消失。

尝试从过程中删除 onload 代码，并在函数调用后使用此代码（jQuery 是安全的，因为 apex 默认包含它，除非您碰巧使用 3.2 等版本） :

sys.htp.p('<script type="text/javascript">');
sys.htp.p('$(document).ready(function(){ initialize("'||'Leidscheplein, Amsterdam,NL'||'"); });');
sys.htp.p('</script>');

Google 地图在 APEX 区域消失

Google map disappearing in APEX region

plsql

procedure

geocode

oracle-apex