谷歌地图消失在APEX地区 [英] Google map disappearing in APEX region

问题描述

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

I'm trying to display map in one of my apex pages region, this map will have draggable marker which links to text-fields on other region and displays geocode for latitude and longitude. Everythings works except one thing the map is appearing just for 0.5 second and disappears. I think the problem is somewhere within coding as I have other similar program where map works perfectly fine. I'm using PL/SQL to retrieve map from procedure in a database.

这是我的步骤:

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调用过程:

This is my PL/SQL to call the procedure:

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代码:

and here is my html code for the region:

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

推荐答案

在您的过程代码中:

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，并且不带任何参数.我怀疑这会导致地图的外观短暂，然后消失.

So the region is rendered, and the procedure code is called. In this code is a call which is registered on the document onload event. Obviously, the document is not ready at this time.
Secondly, you run a script which again initializes the map. This one will instantiate because it is not delayed until the load event.
Shortly after, the document has been generated and the onload will fire, with no parameters. I suspect this causes the brief appearance of the map which then blips out.

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

Try by removing the onload code from the procedure, and use this code after the function call (jQuery is safe because apex includes it by default, unless you happen to be on version 3.2 or the like):

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

这篇关于谷歌地图消失在APEX地区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！