谷歌地圖在APEX地區消失

Question

我試圖在我的apex頁面地區之一顯示地圖，該地圖將有可拖動的標記鏈接到其他地區的文本字段並顯示經緯度地理編碼。除了地圖只出現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是安全的，因爲頂點包括它在默認情況下，除非你恰巧是在3.2版本等）：

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