在Google地图中控制图像标记大小和阴影的不同方法 [英] Different ways of controlling image marker size and shadow in google maps

问题描述

我们目前正在显示效果良好的google maps v3标记，但我有兴趣了解如何使用相同的结构来控制标记大小(并可能添加阴影).

We are currently displaying google maps v3 markers which work fine, but I'm interested in finding out how we can control the marker size (and potentially add a shadow) using the same construct.

现有代码如下:

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

我需要添加哪些内容来控制标记的大小并添加阴影图像? (我看到有使用不同结构的方法，但这需要重写很多现有代码).

What do i need to add in to control the size of the marker and add the shadow image? (i can see there are ways of doing it using different constructs, but that would require a LOT of the existing code to be rewritten).

谢谢！

推荐答案

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

Here is one way to do it. You need to create and use the MarkerImage class for the icon and shadow and then swap them with an enlarged version during your event using the markers setIcon and setShadow methods. The enlarged MarkerImage class needs to use the scaledSize property. This will stretch the image to the size of your MarkerImage size property

以下是此操作的小提琴示例: http://jsfiddle.net/bryan_weaver/jDgGD/

Here is a fiddle example of this in action: 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);
    });

这篇关于在Google地图中控制图像标记大小和阴影的不同方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！