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

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

查看评论码。