无法更改 Google Maps API 中的标记图标答案

【问题标题】：Can't Change Marker Icon in Google Maps API无法更改 Google Maps API 中的标记图标
【发布时间】：2013-05-31 14:22:16
【问题描述】：

我使用 Google Fusion Tables 创建了一张地图，并将地图上传到了 HTML 文档中，我正在对其进行调整以对地图的外观进行细微的更改。我想出了如何插入一个可拖动的图钉/标记，在点击时显示其当前位置的街景，但我不知道如何更改标记的外观。这是我用于交互式街景标记的代码。

        //street view pin
        var contentString = '<div id="content" style="width:500px;height:400px;"></div>';
        var infowindow = new google.maps.InfoWindow({
        content: contentString
        });

        var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: 'Click Here for Street View',
        draggable: true
        });

        google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
        });

        var pano = null;
        google.maps.event.addListener(infowindow, 'domready', function() {
        if (pano != null) {
        pano.unbind("position");
        pano.setVisible(false);             }
        pano = new google.maps.StreetViewPanorama(document.getElementById("content"), {
        navigationControl: true,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.ANDROID},
        nableCloseButton: false,
        addressControl: false,
        linksControl: false
        });
        pano.bindTo("position", marker);
        pano.setVisible(true);
        });

        google.maps.event.addListener(infowindow, 'closeclick', function() {
        pano.unbind("position");
        pano.setVisible(false);
        pano = null;
        });

我尝试调整第 7-14 行，添加一个

    icon: 'cross_hairs_highlight'

这是我想要的样式，但是当我尝试在浏览器中打开 HTML 文档时，图标消失了。还有一些东西我仍然可以拖动并单击以查看街景，但它是不可见的。

有什么建议吗？

感谢您的帮助！！！

【问题讨论】：

标签： google-maps google-maps-api-3 google-maps-markers google-fusion-tables

【解决方案1】：

icon 的值应该是一个 URL，而不是 fusionTable-icon 的名称（这些图标名称只能用于在 fusionTableLayer 中呈现的标记）。

您将在 http://kml4earth.appspot.com/icons.html 找到这些图标的列表（检查图像属性以检索 URL），因此您可以使用例如：

icon:'http://maps.google.com/mapfiles/kml/pal3/icon52.png'

当您希望标记在给定位置居中时，您还必须指定锚点：

icon:{
       url:    'http://maps.google.com/mapfiles/kml/pal3/icon52.png',
       anchor: new google.maps.Point(16,16)
     }

【讨论】：