Question

我正在创建一个包含5组标记的地图。我有所有坐标，标记出现在地图上，但我不知道如何更改每个组的图像。我看过其他例子，但他们没有为我工作。如果有办法改变坐标组或每个坐标的图像，我将不胜感激。

这是我到目前为止所拥有的：

<script type="text/javascript">  function initialize() {

    //add map, the type of map
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 13,
        center: new google.maps.LatLng(31.5603, -91.4031),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    //add locations
    var cottages = [
        ['Savannah Cottage<br />412 S.Pearl Street', 31.55600224874313, -91.4073497056961] ];

    var restaurants = [
    ['Cotton Alley Cafe<br />208 Main Street<br />(601)442-7452<br /><a href="http://www.cottonalleycafe.com" target= "_blank">Website</a>', 31.561075,-91.40503100000001]
    ];

    var bars = [
    ['Under-the-Hill Saloon', 31.559589, -91.41074700000001]
    ];

    var tours = [
    ['Auburn Antebullum Home<br />400 Duncan Avenue<br />(601)442-5981', 31.5457833, -91.39274319999998]
    ];

    var spas = [
    ['Anruss &amp; Co Salon and Spa<br />212 North Commerce Street<br />(601) 445-2007<br /><a href="https://www.facebook.com/anruss.salon" target= "_blank">Website</a>', 31.561061,-91.40116799999998]
       ];


    //declare marker call it 'i'
    var marker, i;

    //declare infowindow
    var infowindow = new google.maps.InfoWindow();

    //add marker for COTTAGES
    for (i = 0; i < cottages.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(cottages[i][1], cottages[i][2]),
            map: map,
        });

        //click function to marker, pops up infowindow
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(cottages[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }

     //add markers for RESTAURANTS
     for (i = 0; i < restaurants.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(restaurants[i][1], restaurants[i][2]),
            map: map,
        });

        //click function to marker, pops up infowindow
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(restaurants[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }

     //add markers for BARS
     for (i = 0; i < bars.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(bars[i][1], bars[i][2]),
            map: map,
        });

        //click function to marker, pops up infowindow
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(bars[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }

     //add markers for TOURS
     for (i = 0; i < tours.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(tours[i][1], tours[i][2]),
            map: map,
        });

        //click function to marker, pops up infowindow
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(tours[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }

     //add markers for SPAS
     for (i = 0; i < spas.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(spas[i][1], spas[i][2]),
            map: map,
        });

        //click function to marker, pops up infowindow
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(spas[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }


}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

我不确定你的想法，但这里有一些可能有用的代码：

function initialize() {
    //add map, the type of map
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 13,
        center: new google.maps.LatLng(31.5603, -91.4031),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    //create infowindow
    var infowindow = new google.maps.InfoWindow();

    //add locations (as in the question)
    var cottages = [...];
    var restaurants = [...];
    var bars = [...];
    var tours = [...];
    var spas = [...];

    //Make an array that lists all the locations arrays.
    var allLocations = [cottages, restaurants, bars, tours, spas];

    //Define a generalized click handler for all markers.
    //ie. one handler, not one per marker.
    function clickMarker() {
        var data = this.data;
        infowindow.setContent(data.category[data.index][0]);
        infowindow.open(map, this);
        //HERE, you can loop through `data.category.markers` and 
        //do whatever is necessary to each marker in the category
        //eg change their icons.
        for(var i=0; i<data.category.markers.length; i++) {
            var url = ...;//expression that determines which marker icon to use
            data.category.markers[i].setIcon(url);
        }
    }

    //Now loop through all the markers arrays and add markers to the map
    for (var i=0; i<allLocations.length; i++) {
        var arr = allLocations[i];

        //Create an associated array in which to store references to category's markers
        arr.markers = [];

        for (var marker, j=0; j<arr.length; j++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(arr[j][1], arr[j][2]),
                map: map
            });

            arr.markers[j] = marker;

            //This allows the click hander to be generalized,
            //and for each marker to have a reference back
            //to its category array, and its own index.
            marker.data = {
                category: arr,
                index: j
            };
            google.maps.event.addListener(marker, 'click', clickMarker);
        }
    }
}
google.maps.event.addDomListener(window, 'load', initialize);

请参阅代码中的注释。

如何更改一组地图标记的图像

1 个答案: