1

我们目前正在显示可以正常工作的谷歌地图 v3 标记，但我有兴趣了解如何使用相同的构造控制标记大小（并可能添加阴影）。

现有代码如下所示：

            var marker28790607x = new google.maps.Marker({
              map: map, 
              pop_title: 'hello',
              position: new google.maps.LatLng(47.9996, -4.5586),
              draggable: false,
              title: 'Hello',
              zIndex: 999,
              icon: 'images/map_icons/s6.png'
            }); 
            google.maps.event.addListener(marker28790607x, 'click', onMarkerClick);
            });

我需要添加什么来控制标记的大小并添加阴影图像？（我可以看到有一些方法可以使用不同的构造，但这需要重写大量现有代码）。

谢谢！

4

1 回答 1

0

这是一种方法。您需要为图标和阴影创建和使用MarkerImagesetIcon类，然后在活动期间使用标记和setShadow方法将它们与放大版本交换。放大的MarkerImage类需要使用该scaledSize属性。这会将图像拉伸到您的MarkerImage size 属性的大小

这是一个实际的小提琴示例：http: //jsfiddle.net/bryan_weaver/jDgGD/

    var beachFlagUrl = "https://developers.google.com/maps/documentation/javascript/examples/images/beachflag.png";
    var beachflagShadowUrl = "https://developers.google.com/maps/documentation/javascript/examples/images/beachflag_shadow.png";

    // Origins, anchor positions and coordinates of the marker
    // increase in the X direction to the right and in
    // the Y direction down.
    var image = new google.maps.MarkerImage(
    beachFlagUrl,
    // This marker is 20 pixels wide by 32 pixels tall.
    new google.maps.Size(20, 32),
    // The origin for this image is 0,0.
    new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at 0,32.
    new google.maps.Point(0, 32));

    var shadow = new google.maps.MarkerImage(
    beachflagShadowUrl,
    // The shadow image is larger in the horizontal dimension
    // while the position and offset are the same as for the main image.
    new google.maps.Size(37, 32), 
    new google.maps.Point(0, 0), 
    new google.maps.Point(0, 32));

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(-33.9, 151.2),
        map: map,
        shadow: shadow,
        icon: image,
        title: "Test Marker"
    });

    //double the size of the marker when the mouse is pressed.
    google.maps.event.addListener(marker, 'mousedown', function() {
        //The new Marker Image with the scaled Size
        var newIcon = new google.maps.MarkerImage(
            //marker image url
            this.icon.url, 
            //marker image size
            new google.maps.Size(this.icon.size.width * 2, 
                                 this.icon.size.height * 2), 
            //marker image origin
            this.icon.origin, 
            //marker image anchor
            new google.maps.Point(0, 64), 
            //marker image scaledSize
            new google.maps.Size(this.icon.size.width * 2, 
                                 this.icon.size.height * 2)
        );
        var newShadow = new google.maps.MarkerImage(
            this.shadow.url, 
            new google.maps.Size(this.shadow.size.width * 2,
                                 this.shadow.size.height * 2), 
            this.shadow.origin, 
            new google.maps.Point(0, 64), 
            new google.maps.Size(this.shadow.size.width * 2, 
                                 this.shadow.size.height * 2)
        );

        //set the new properties on the marker.
        this.setIcon(newIcon);
        this.setShadow(newShadow);

    });

    //return marker to original size when mouse is released.
    google.maps.event.addListener(marker, 'mouseup', function() {
        this.setIcon(image);
        this.setShadow(shadow);
    });
于 2012-06-20T16:38:01.537 回答