谷歌地图在 APEX 地区消失

Posted

技术标签:

【中文标题】谷歌地图在 APEX 地区消失【英文标题】:Google map disappearing in APEX region 【发布时间】:2015-04-27 12:27:39 【问题描述】:

我正在尝试在我的顶点页面区域之一中显示地图,该地图将具有可拖动的标记,该标记链接到其他区域的文本字段并显示纬度和经度的地理编码。一切都有效,除了地图只出现 0.5 秒然后消失的一件事。我认为问题出在编码中,因为我有其他类似的程序,其中 map 工作得非常好。我正在使用 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>

【问题讨论】:

【参考方案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.maps.event.addDomListener(window, ''load'', initialize); 的情况下初始化地图,经过多次不同的尝试和测试后它似乎不起作用,我只是发现它可以工作。我发现很难只调用该过程并显示所有需要显示的数据。您能指导我如何更改程序以使其正常工作吗? @UZIERSKI 抱歉,不提供任何解决方案建议真是太愚蠢了。我已经在答案末尾编辑了它,试试看。 是的!!!它终于奏效了,我刚刚从程序中删除,它奏效了。但是我不得不说这很奇怪,我尝试了超过 5 天,没有尝试不同的东西,他们不想工作,但是在添加线路测试并将其全部删除之后,这怎么可能?我也在开发移动应用程序,我发现这个 JavaScript 有时真的很繁琐。还是很烦人谢谢你:) javascript 一点也不烦人 :-) 它只需要理解,就像任何其他编程语言一样。结合 html 和 DOM(及其事件)的工作方式

以上是关于谷歌地图在 APEX 地区消失的主要内容,如果未能解决你的问题,请参考以下文章

Android 谷歌地图 myLocationOverlay 消失了?

JQuery面板推送后谷歌地图消失

在谷歌地图 api v3 中将地区、城市、州、国家/地区转换为纬度和经度?

如何使用谷歌地图 API 获取阿联酋国家/地区的邮政编码区域?

谷歌地图 api 长时间加载的 jQuery 移动对话框消失

当不硬编码纬度和经度时,谷歌地图上的图钉会消失