如果选中，谷歌地图 api 多个标记会改变颜色 [关闭]

Question

所以我有一个多标记，默认情况下它都是绿色的，我想在单击后将特定标记变为蓝色，如果未选中则恢复为绿色。任何人都可以这样做吗？

下面是我的代码

marker.addListener('click', function(marker, i) {
                return function() {
                    this.setIcon("http://maps.google.com/mapfiles/ms/icons/blue-dot.png")
                }
            }(marker, j))

Answer 1

这里正在工作 jsfiddle。也许它可以帮助你。

http://jsfiddle.net/s8vgxp3g/1/

var locations = [
    [
        "New Mermaid",
    36.9079, -76.199,
    1,
        "Georgia Mason",
        "",
        "Norfolk Botanical Gardens, 6700 Azalea Garden Rd.",
        "coming soon"],
    [
        "1950 Fish Dish",
    36.87224, -76.29518,
    2,
        "Terry Cox-Joseph",
        "Rowena's",
        "758 W. 22nd Street in front of Rowena's",
        "found"],
    [
        "A Rising Community",
    36.95298, -76.25158,
    3,
        "Steven F. Morris",
        "Judy Boone Realty",
        "Norfolk City Library - Pretlow Branch, 9640 Granby St.",
        "found"],
    [
        "A School Of Fish",
    36.88909, -76.26055,
    4,
        "Steven F. Morris",
        "Sandfiddler Pawn Shop",
        "5429 Tidewater Dr.",
        "found"],
    [
        "Aubrica the Mermaid (nee: Aubry Alexis)",
    36.8618, -76.203,
    5,
        "Myke Irving/ Georgia Mason",
        "USAVE Auto Rental",
        "Virginia Auto Rental on Virginia Beach Blvd",
        "found"]
];
var markers = [];
var map;

function initialize() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        // center: new google.maps.LatLng(-33.92, 151.25),
        center: new google.maps.LatLng(36.8857, -76.2599),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();
    var iconBase = 'https://cdn3.iconfinder.com/data/icons/musthave/24/';
    var marker, i;

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            icon: iconBase + 'Stock%20Index%20Up.png'
        });

        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(locations[i][0], locations[i][6]);
                infowindow.open(map, marker);
                for (var j = 0; j < markers.length; j++) {
                    markers[j].setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Up.png");
                }
                marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png");
            };
        })(marker, i));
        markers.push(marker);

    }
}
google.maps.event.addDomListener(window, 'load', initialize);

<script src="http://maps.google.com/maps/api/js"></script>
<div>
    <div id="map" style="width: 500px; height: 400px;"></div>
</div>