如何在谷歌地图中添加两个不同的标记？答案

【问题标题】：How can I add two different marker in Google Map?如何在谷歌地图中添加两个不同的标记？
【发布时间】：2019-12-03 21:00:50
【问题描述】：

我想在 Google 地图中添加两个具有不同图标的不同标记但是当我选择一个时，第二个标记图标会根据第一个图标替换。示例：当我单击点时，应将一个标记添加到地图中，当我单击 Restau 时，应使用不同的标记将另一个标记添加到地图中，但我得到了具有相同图标的标记请问有什么解决办法吗？

          map.addListener('click', function (e) {

            $(".point").on("click", function () {
                pointClicked = true;
                restauClicked = false;
            });
            $(".restau").on("click", function () {
                restauClicked = true;
                pointClicked = false;
            })
            var icons = {
                iconLocalise: {
                    url: "assets/img/localise.png", // url
                    scaledSize: new google.maps.Size(50, 50), // scaled size
                    origin: new google.maps.Point(0, 0), // origin
                    anchor: new google.maps.Point(0, 0) // anchor
                },
                iconRestau: {
                    url: "assets/img/map-icone.png", // url
                    scaledSize: new google.maps.Size(50, 50), // scaled size
                    origin: new google.maps.Point(0, 0), // origin
                    anchor: new google.maps.Point(0, 0) // anchor
                }
            };
            $("#savePoint").on("click", function () {
                if (pointClicked == true) {

                    placeMarkerAndPanTo(e.latLng, map, icons.iconLocalise)

                }
                if (restauClicked == true) {

                    placeMarkerAndPanTo(e.latLng, map, icons.iconRestau)

                }

            });
        });



    }
    function placeMarkerAndPanTo(latLng, map, icon) {

        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            icon: icon
        });
        icon = null;
        marker = null;
        alert(JSON.stringify(icon));

        map.panTo(latLng);

    }

【问题讨论】：

请提供一个minimal reproducible example（最好是 StackOverflow 代码 sn-p）来证明您的问题（对问题进行更清晰的解释也会有所帮助）。

标签： javascript jquery google-maps dictionary marker

【解决方案1】：

您可以使用 if-else 语句 检查您单击的元素的值，以确定您将在地图中使用的图标。您可以参考我创建的sample code，它每次将开关状态从“默认”更改为“恢复”时使用不同的标记。

这是我在代码中使用的 if else 语句的 sn-p。

 var iconLook;
    //setting condition that check for the value of the Switch to determine the icon
    if (switchStatus.checked) {
        iconLook = "http://maps.google.com/mapfiles/ms/icons/green-dot.png";
    } else {
        iconLook = "http://maps.google.com/mapfiles/ms/icons/red-dot.png";
    }
//passing the value of the icon in the new marker that is being created
    var marker = new google.maps.Marker({
        position: latlng,
        icon: iconLook,
        map: map
    });

【讨论】：