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

How can I loop this PL/SQL statement so that it plots multiple markers on my Google map?

我正在使用 Oracle 12c 数据库、APEX 5 和 Google 地图 API。

此 PL/SQL 语句从 sighting table 获取每次目击的坐标并将其绘制在地图上。我在进入循环之前创建地图,因为我想对所有标记使用相同的地图。 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;

这只输出一个标记:

WHERE sighting.id = sighting_rec.id; 之后包含一个 DBMS_OUTPUT.PUT_LINE(l_lat || ',' || l_lng); 表明正在检索所有记录:

-4.083592,50.31548
-4.083639,50.315456
-4.083714,50.315475

我不明白为什么只绘制了第一个标记!我认为每次循环迭代时,都会重新创建标记。我曾尝试使用 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 例程,只会调用一个,具体取决于浏览器。创建一个添加所有标记的函数(并在某处调用它,我看不到你在哪里调用 intializeMapinitializeMarkers 例程,但是如果你得到一个带有标记的地图,这一定发生在某个地方)。

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>');