javascript - 在谷歌地图中控制图像标记大小和阴影的不同方法

Question

我们目前显示的谷歌地图 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);
            });

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

谢谢!

Answer 1

这是一种方法。您需要创建并使用MarkerImage图标和阴影的类，然后在事件期间使用标记 setIcon 和 setShadow 方法将它们交换为放大版本。放大的MarkerImage类需要使用scaledSize属性。这会将图像拉伸(stretch)到 MarkerImage size 属性

的大小

这是一个实际的 fiddle 示例: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);
    });