在标记构造函数中设置图标后，标记图标显示传统图标和自定义图标答案

【问题标题】：Marker icon displays both the traditional icon and custom icon after setting icon in marker constructor在标记构造函数中设置图标后，标记图标显示传统图标和自定义图标
【发布时间】：2020-01-29 23:33:22
【问题描述】：

我在视图上有一张地图，其中显示了一些标记和信息框。一切正常，但是当我将地图的图标属性设置为唯一图像时，标记会显示两个图像，其中我的唯一图标覆盖了默认的 google pin。这是它目前的样子： !https://imgur.com/a/6P1tgE7

我在地图构造函数上尝试了很多定义，但结果都是一样的。

var image = 'http://maps.google.com/mapfiles/ms/icons/rangerstation.png';

//Add markers to view
function addMarker(x, y, ward, community, lganame, projecttype) {
    var location = new google.maps.LatLng(x, y);
    var marker = new google.maps.Marker({
        position: location,
            map: map,
            title: ward
        });

    marker.setIcon(image);

    addInfoWindowToMarker(marker, ward, community, lganame, projecttype);
}

我希望显示的图标只是我指定的图标，并完全忽略默认的 Google 地图标记。

【问题讨论】：

您能发布您的完整代码或 jsfiddle 吗？您的自定义标记对我来说没有问题；我只看到您的图片，而不是 Google 的默认标记图标。

标签： javascript html css google-maps google-maps-api-3

【解决方案1】：

我通过改变我的标记定义解决了这个问题。请注意，我还缩小了尺寸或更好地展示。

        function addMarker(x, y, ward, community, lganame, projecttype) {
            var location = new google.maps.LatLng(x, y);
            var marker = new google.maps.Marker({
                position: location,
                map: map,
                title: ward,
                //icon: 'http://maps.google.com/mapfiles/ms/icons/rangerstation.png',
                icon: new google.maps.MarkerImage(
                'http://maps.google.com/mapfiles/ms/icons/rangerstation.png',
                null, /* size is determined at runtime */
                null, /* origin is 0,0 */
                null, /* anchor is bottom center of the scaled image */
                new google.maps.Size(20, 20)
              )
            });
            //Call info windows and bounce event listener so the marker animates when it is clicked
            addInfoWindowToMarker(marker, ward, community, lganame, projecttype);
        }

It works just fine now.

【讨论】：