Question

我对编码很新，我试图建立一个网站已经有3 4天了。我开始使用一个wordpress框架，来自Elegantthemes的一个很好的主题叫做Explora。

这个主题非常有限，但我通过改变响应性，地图，界面和导航，设法改变了它的构建方式（仅在前端部分）。尽管如此，由于我的编码知识（jscript和php）大约在0左右，因此我坚持使用标记部分。

所以这就是问题：

通过以下代码，我初始化标记，并尝试给它们一个圆形，然后，我想修改形状的颜色，同时将它们鼠标悬停在它们上面。

 
function et_add_marker( marker_order, marker_lat, marker_lng, marker_description ){
            var marker_id = 'et_marker_' + marker_order;

            $et_main_map.gmap3({
                marker : {
                    id : marker_id,
                    latLng : [marker_lat, marker_lng],
                    options: {
                        //icon : "/images/green-marker.png"  //original marker code
                        icon: {
                            path: google.maps.SymbolPath.CIRCLE,
                            fillOpacity: 0.5,
                            //   fillColor: 'ff0000',
                            strokeOpacity: 1.0,
                            strokeColor: 'fff000',
                            strokeWeight: 3.0, 
                            scale: Math.floor(Math.random()*21), //random pixel size until get property
                              }
                    },
                    events : {
                        click: function( marker ){
                            if ( et_active_marker ){
                                et_active_marker.setAnimation( null );
                            //  et_active_marker.setIcon( '/images/black-marker.png' );

                            }
                            et_active_marker = marker;

                            marker.setAnimation( google.maps.Animation.BOUNCE);
                            //marker.setIcon( '/images/green-marker.png' );
                                         marker.setOptions({ fillColor: '#0000ff' }); // this is where it doesn t work and I DON T UNDERSTAND WHY 
                            $(this).gmap3("get").panTo( marker.position );

                            $.fn.et_simple_slider.external_move_to( marker_order );
                        },
                        mouseover: function( marker ){
                            $( '#' + marker_id ).css( { 'display' : 'block', 'opacity' : 0 } ).stop(true,true).animate( { bottom : '15px', opacity : 1 }, 500 );
                        },
                        mouseout: function( marker ){
                            $( '#' + marker_id ).stop(true,true).animate( { bottom : '50px', opacity : 0 }, 500, function() {
                                $(this).css( { 'display' : 'none' } );
                            } );
                        }
                    }
                },
                overlay : {
                    latLng : [marker_lat, marker_lng],
                    options : {
                        content : marker_description,
                        offset : {
                            y:-42,
                            x:-122
                        }
                    }
                }
            });
        }

我知道Noobs的问题在像stackoverflow这样的服务器论坛上真的很烦人，我知道我们，新手，应该先请一步一步地学习语言，然后再向人们求助，但这件事超出了我的耐心，我会非常感谢理解为什么这个MARKER.setOptions。（{fillColor：'＃0000ff'}）;事情不起作用。非常感谢您阅读：）

PS：jscript和php对我来说太奇怪了，但是它们很吸引人

如果您想查看Wsite：http://www.one-world-guide.com

Answer 1

fillColor是Icon的属性，而不是Marker，因此调用marker.setOptions({fillColor: '0000ff'})将无效。

调用setOptions marker.setOptions({icon: {icon props...}})或marker.setIcon({icon props...})

为避免在整个地方都有图标定义，您可以将它们粘贴在变量中：

var icon = {
        path: google.maps.SymbolPath.CIRCLE,
        fillOpacity: 0.5,
        fillColor: 'ff0000',
        strokeOpacity: 1.0,
        strokeColor: 'fff000',
        strokeWeight: 3.0,
        scale: 20
};
// same as icon but with different fillColor
// could use jQuery.extend({}, icon, {fillColor: '0000ff'}) to clone instead
var iconSelected = {
    path: icon.path,
    fillOpacity: icon.fillOpacity,
    fillColor: '0000ff',
    strokeOpacity: icon.strokOpacity,
    strokeColor: icon.strokeColor,
    strokeWeight: icon.strokeWeight,
    scale: icon.scale
};

var marker = new google.maps.Marker({
    map: map,
    position: location,
    icon: icon
});

然后在点击时切换图标：

google.maps.event.addListener(marker, 'click', function() {
    this.setIcon(iconSelected);
});

这只是直接使用API而不是gmap3，但我相信你明白了。

这是一个有效的fiddle来展示。它还有一个解决方案来更改以前选择的标记颜色。

Gmap v3事件更新符号标记颜色

1 个答案: