Google-Maps API (JS) 中循环中的多个标记

Question

我尝试在 Google 地图上使用循环放置多个标记（新的 2024 API），但只显示最后一个。

我的代码：

 let map;
        async function initMap(center, pk, partner) {
            const centre = { lat: Number(coord[0]), lng: Number(coord[1]) };
            // Request needed libraries.
            const { Map } = await google.maps.importLibrary("maps");
            const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
            // The map, centered
            map = new Map(document.getElementById("map"), {
                zoom: 15,
                center: centre,
                mapId: "DEMO_MAP_ID",
            });
            // A marker with a URL pointing to a PNG.
            const startFlag = document.createElement("img");
            startFlag.src = "images/icones/depart.png";
            const freePkFlag = document.createElement("img");
            freePkFlag.src = "images/icones/parking_free.png";
            const payantPkFlag = document.createElement("img");
            payantPkFlag.src = "images/icones/parking.png";
            const partnerFlag = document.createElement("img");
            partnerFlag.src = "images/icones/partner.png";
 var tabPin = new Array();
            //création de marqueur
           
            function createMarker(position, type, titre = "") {
                var coord = position.split('*');
                newMarker = new AdvancedMarkerElement({
                    map,
                    position: { lat: position[0], lng: position[1] },
                    content: type,
                    title: titre,
                });
                tabPin.push(newMarker);
            }
            // le départ
            createMarker(center, startFlag, "point de départ");
            for (var i = 0; i < pk["free"].length; i++) {
                createMarker(pk["free"][i]["GPS"], freePkFlag);
            }
            for (var i = 0; i < pk["payant"].length; i++) {
                createMarker(pk["payant"][i]["GPS"], payantPkFlag);
            }
            for (var i = 0; i < partner.length; i++) {
                createMarker(partner[i]["GPS"], partnerFlag);
            }
            for (var i = 0; i < tabPin.length; i++) {
                console.log(tabPin[i]);
            }
        }

我尝试使用（在createmarker函数中）：

• 常量新标记=
• var 新标记=
• 新标记= 结果一样！

日志的结果是所有标记都存在并且具有正确的 GPS。

在此输入图片描述

感谢您的帮助

Answer 1

我找到了解决方案。 问题出在属性内容和作为图钉的图像上。

解决方案：

function createMarker(position, type, titre = "") {
            const flag = document.createElement("img");
            flag.src = "images/icones/" + type + ".png";
            var newMarker = new AdvancedMarkerElement({
                map,
                position: { lat:position[0], lng: position[1] },
                content: flag,
                title: titre,
            });
        }