Question

我使用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文档时，图标会消失。还有一些东西，我仍然可以拖动并点击街景，但它是不可见的。

有什么建议吗？

感谢您的帮助!!!

JH

Answer 1

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

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

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)
     }

无法在Google Maps API中更改标记图标

1 个答案: