javascript - Google Maps API -- クリック時のマーカーごとの一意のアクティブアイコン

Question

Google Maps API を使用した次の JS があります。

// initialize variables
var infowindow = null;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var gmarkers = [];

$(document).ready(function () { initialize(); });

function initialize() {

    // directions
    directionsDisplay = new google.maps.DirectionsRenderer();

    var centerMap = new google.maps.LatLng(busipress_map_vars.center_lat , busipress_map_vars.center_long);

    var myOptions = {
        zoom: 4,
        center: centerMap,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }

    var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

    setMarkers(map, sites);
    infowindow = new google.maps.InfoWindow({
            content: "loading..."
        });

    var start = busipress_map_vars.path_start;
    var end = busipress_map_vars.path_end;
    var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });

    directionsDisplay.setMap(map);
}

/**
 * show locations
 */
var sites = busipress_map_vars.locations;

/**
 * set markers on map
 */
function setMarkers(map, markers) {

    // default icon
    var defaultIcon = new google.maps.MarkerImage(busipress_map_vars.default_map_icon,
        // This marker is 32 pixels wide by 32 pixels tall.
        new google.maps.Size(busipress_map_vars.default_map_icon_width, busipress_map_vars.default_map_icon_height),
        // 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((busipress_map_vars.default_map_icon_width / 2), busipress_map_vars.default_map_icon_height));

    // default shadow
    var shadow = new google.maps.MarkerImage(busipress_map_vars.map_icon_shadow,
        // 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(busipress_map_vars.map_icon_shadow_width, busipress_map_vars.map_icon_shadow_height),
        new google.maps.Point(0,0),
        new google.maps.Point((busipress_map_vars.default_map_icon_width / 2), busipress_map_vars.map_icon_shadow_height));

    // active icion
    var activeIcon = new google.maps.MarkerImage(busipress_map_vars.active_map_icon,
        // This marker is 20 pixels wide by 32 pixels tall.
        new google.maps.Size(busipress_map_vars.active_map_icon_width, busipress_map_vars.active_map_icon_height),
        // 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((busipress_map_vars.active_map_icon_width / 2), busipress_map_vars.active_map_icon_height));
    var shape = {
        coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0],
        type: 'poly'
    };

    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: sites[0],
            icon: sites[4][0],
            shadow: sites[6][0],
            zIndex: 1,
            html: sites[3]
        });

        google.maps.event.addListener(marker, "click", function () {
            for (var i = 0; i < gmarkers.length; i++) {
               //gmarkers[i].setIcon(defaultIcon);
               gmarkers[i].setIcon(sites[4][0]);
            }
            //this.setIcon(activeIcon);
            this.setIcon(sites[5][0]);

            infowindow.setContent(this.html);
            infowindow.open(map, this);
        });
        gmarkers.push(marker);
    }
}

私がやろうとしているのはsite、各マーカーのアイコンを（一意であるため）マップし、クリックしてそのサイトのアクティブ状態に変更することです。したがって、アクティブなアイコンに変更すると機能するようですが、そのリセット機能を使用して (他のすべてのアイコンをデフォルトのアイコンに戻す)、個々のアイコンではなく、サイトのアイコンの 1 つに戻します。なぜこれが起こっているのか、誰にも考えがありますか？

また、これを最初に掘り下げたとき、defaultIconたとえば使用していました（クリックアクションでコメントアウトされていることがわかります。JavascriptをローカライズしてアイコンのURLを渡しているので、渡すことができるものはありますか元の宣言で行われnew google.maps.Markerたように、サイズ、原点、およびポイントまでにvar defaultIcon. たとえば、にsites[4][0]は画像の URL がsites[4][1]ありますが、幅とsites[4][2]高さがあります.私がそこに何も持っていない状態で出発するので、ここで少し混乱します. ありがとう!

アップデート

問題は変数を宣言する場所にあるのではないかと考えていたので、それらをに追加し、for loopこれらを使用するようにマップマーカーを調整しました。

// initialize variables
var infowindow = null;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var gmarkers = [];

$(document).ready(function () { initialize(); });

function initialize() {

    // directions
    directionsDisplay = new google.maps.DirectionsRenderer();

    var centerMap = new google.maps.LatLng(busipress_map_vars.center_lat , busipress_map_vars.center_long);

    var myOptions = {
        zoom: 4,
        center: centerMap,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }

    var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

    setMarkers(map, sites);
    infowindow = new google.maps.InfoWindow({
            content: "loading..."
        });

    var start = busipress_map_vars.path_start;
    var end = busipress_map_vars.path_end;
    var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });

    directionsDisplay.setMap(map);
}

/**
 * show locations
 */
var sites = busipress_map_vars.locations;

/**
 * set markers on map
 */
function setMarkers(map, markers) {

    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];

        // default icon
        var defaultIcon = new google.maps.MarkerImage(sites[4][0],
            // This marker is 32 pixels wide by 32 pixels tall.
            new google.maps.Size(sites[4][1], sites[4][2]),
            // 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((sites[4][1] / 2), sites[4][2]));

        // default shadow
        var shadow = new google.maps.MarkerImage(sites[6][0],
            // 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(sites[6][1], sites[6][2]),
            new google.maps.Point(0,0),
            new google.maps.Point((sites[6][1] / 2), sites[6][2]));

        // active icion
        var activeIcon = new google.maps.MarkerImage(sites[5][0],
            // This marker is 20 pixels wide by 32 pixels tall.
            new google.maps.Size(sites[5][1], sites[5][2]),
            // 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((sites[5][1] / 2), sites[5][2]));
        var shape = {
            coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0],
            type: 'poly'
        };

        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: sites[0],
            icon: defaultIcon,
            shadow: shadow,
            zIndex: 1,
            html: sites[3]
        });

        google.maps.event.addListener(marker, "click", function () {
            for (var i = 0; i < gmarkers.length; i++) {
               gmarkers[i].setIcon(defaultIcon);
            }
            this.setIcon(activeIcon);

            infowindow.setContent(this.html);
            infowindow.open(map, this);
        });
        gmarkers.push(marker);
    }
}

ただしdefaultIcon、個々の defaultIcon イメージではなく、すべてを 1 つに変更します。これは、他の for ループ内の for ループに関係している可能性がありますが、よくわかりません。

score 4 · Accepted Answer

クリックリスナー関数を変更する必要があります。

    google.maps.event.addListener(marker, "click", function () {
        for (var i = 0; i < gmarkers.length; i++) {
           gmarkers[i].setIcon(defaultIcon);
        }
        this.setIcon(activeIcon);

        infowindow.setContent(this.html);
        infowindow.open(map, this);
    });

各マーカーの「一意の」アイコンを保存し、defaultIcon ではなくそのアイコンに戻す必要があります。おそらく最も簡単なのは、マーカーのプロパティ (つまり、marker.myDefaultIcon) として保存することです。次に、次のようにします。

gmarkers[i].setIcon(gmarkers[i].myDefaultIcon);

jsfiddle (以前の質問から再度変更)

更新: あなたが提供したリンクで JavaScript エラーが発生します:

Error: marker[i] is undefined
Source File: http://zslabs.com/jhtwp/wp-content/plugins/busipress/js/map.1349993292.js
Line: 105

105はこの行です：this.setIcon(marker[i].myActiveIcon);

ここ：

    google.maps.event.addListener(marker, "click", function () {
        for (var i = 0; i < gmarkers.length; i++) {
           gmarkers[i].setIcon(gmarkers[i].myDefaultIcon);
        }
        this.setIcon(marker[i].myActiveIcon);

        infowindow.setContent(this.html);
        infowindow.open(map, this);
    });

this.myActiveIcon が必要だと思います。

概念を示す jsfiddle (「ドット」がアクティブで、デフォルトではドットはありません)

javascript - Google Maps API -- クリック時のマーカーごとの一意のアクティブ アイコン

アップデート

1 に答える 1

Related

Reference

javascript - Google Maps API -- クリック時のマーカーごとの一意のアクティブアイコン