1

現在、正常に機能する Google マップ 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

ここにそれを行う1つの方法があります。アイコンと影のMarkerImageクラスを作成して使用し、イベント中にマーカーsetIconと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 に答える