Fatal编程技术网
  • javascript/
  • Javascript 如何循环此PL/SQL语句，以便它在我的Google地图上绘制多个标记？

Javascript 如何循环此PL/SQL语句，以便它在我的Google地图上绘制多个标记？

javascript oracle google-maps plsql oracle-apex

Javascript 如何循环此PL/SQL语句，以便它在我的Google地图上绘制多个标记？,javascript,oracle,google-maps,plsql,oracle-apex,Javascript,Oracle,Google Maps,Plsql,Oracle Apex,我使用的是Oracle 12c数据库、APEX 5和Google Maps API 此PL/SQL语句从瞄准表中获取每个瞄准的坐标，并将其绘制在地图上。我在进入循环之前创建贴图，因为我想对所有标记使用相同的贴图。javascript函数是在动态页面加载操作中调用的 DECLARE l_lng NUMBER; l_lat NUMBER; l_id NUMBER(5,0); htp.print('<html>'); htp.print('<head>'); h

我使用的是Oracle 12c数据库、APEX 5和Google Maps API

此PL/SQL语句从瞄准表中获取每个瞄准的坐标，并将其绘制在地图上。我在进入循环之前创建贴图，因为我想对所有标记使用相同的贴图。javascript函数是在动态页面加载操作中调用的

DECLARE
  l_lng NUMBER;
  l_lat NUMBER;
  l_id  NUMBER(5,0);

htp.print('<html>');
htp.print('<head>');
htp.print('<style>
    #map {
            width: 500px;
            height: 400px;
        }
    </style>
');

htp.print('
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
        function initializeMap() {
              var myLatLng = {
                  lng: -4.083020,
                  lat: 50.315239
              };

              map = new google.maps.Map(document.getElementById("map"), {
                  zoom: 15,
                  center: myLatLng
              });          
        }
    </script>
');

BEGIN
  FOR sighting_rec IN
  (SELECT id, species_id FROM sighting ORDER BY id
  )
  LOOP
    SELECT sighting.id,
      t.x Longitude,
      t.y Latitude
    INTO l_id,
      l_lng,
      l_lat
    FROM sighting,
      TABLE(sdo_util.getvertices(sighting.location)) t
    WHERE sighting.id = sighting_rec.id;

    htp.print(' 
        <script>
            function initializeMarkers() {
                var myLatLng = {
                    lng: ' || l_lng || ',
                    lat: ' || l_lat || '
                };

                var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: ' || l_id || '
                });
            }
        </script>
    ');
    htp.print('</head>');

  END LOOP;
    htp.print('
    <body>
        <div id="map"></div>
    </body>
    ');
    htp.print('</html>');
END;
我搞不懂为什么只画第一个标记！我认为每次循环迭代时，都会重新创建标记。我尝试使用var'| | l|id | |'=new google.maps.Marker，但这导致地图根本无法加载！任何指导都会很好

这是发送到浏览器时的HTML输出：

        <script>


            function initializeMarkers() {

                    var myLatLng = {
                        lng: -4.083592,
                        lat: 50.31548
                    };

                    var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    title: 12
                    });

          }
        </script>
        <script>


            function initializeMarkers() {

                    var myLatLng = {
                        lng: -4.083639,
                        lat: 50.315456
                    };

                    var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    title: 13
                    });

          }
        </script>
        <script>


            function initializeMarkers() {

                    var myLatLng = {
                        lng: -4.083714,
                        lat: 50.315475
                    };

                    var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    title: 14
                    });

          }
        </script>
问题是您有多个initializeMarkers例程，只调用一个，这取决于浏览器。创建一个添加所有标记并在某处调用的函数，我看不出您在何处调用initializeMap或initializeMarkers例程，但是如果您得到一个带有标记的映射，那么它一定在某处发生

htp.print('<script>
    function initializeMarkers() {');

BEGIN
  FOR sighting_rec IN
  (SELECT id, species_id FROM sighting ORDER BY id
  )
  LOOP
    SELECT sighting.id,
      t.x Longitude,
      t.y Latitude
    INTO l_id,
      l_lng,
      l_lat
    FROM sighting,
      TABLE(sdo_util.getvertices(sighting.location)) t
    WHERE sighting.id = sighting_rec.id;

    htp.print(' 
            var myLatLng = {
                lng: ' || l_lng || ',
                lat: ' || l_lat || '
            };

            var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: ' || l_id || '
            });');

  END LOOP;

htp.print('}
    </script>
');
htp.print('</head>');
发送到浏览器的HTML是什么样子的？看起来您在initializeMarkers函数中只创建了一个标记。Javascript只允许一个具有该名称的函数，如果我正确阅读了您的代码，您将为希望显示的每个标记创建该函数的副本。HTML输出3个标记，我将根据字符对其提出质疑limit@geocodezip我已将输出添加到问题的底部。 
htp.print('<script>
    function initializeMarkers() {');

BEGIN
  FOR sighting_rec IN
  (SELECT id, species_id FROM sighting ORDER BY id
  )
  LOOP
    SELECT sighting.id,
      t.x Longitude,
      t.y Latitude
    INTO l_id,
      l_lng,
      l_lat
    FROM sighting,
      TABLE(sdo_util.getvertices(sighting.location)) t
    WHERE sighting.id = sighting_rec.id;

    htp.print(' 
            var myLatLng = {
                lng: ' || l_lng || ',
                lat: ' || l_lat || '
            };

            var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: ' || l_id || '
            });');

  END LOOP;

htp.print('}
    </script>
');
htp.print('</head>');