如何在谷歌地圖上添加具有不同圖標的標記？

Question

我有這個代碼：

<div id="map_canvas"></div>
<script>
   window.onload = function () {
       var styles = [{"featureType":"all"}];
       var bounds = new google.maps.LatLngBounds();
       var options = {
           mapTypeControlOptions: {
               mapTypeIds: ['Styled']
           },
           center: new google.maps.LatLng(11, 22),
           zoom: 15,
           disableDefaultUI: true,
           mapTypeId: 'Styled'
       };
       marker = new google.maps.Marker({
           map:map,
       });
       var div = document.getElementById('map_canvas');
       var map = new google.maps.Map(div, options);
       var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });

       var markers = [
                        [
                          'Atrakcja 1 pl', 
                           51.73925413, 
                           19.51309225, 
                           'Atrakcja 1 pl', 
                           '#'
                         ],
                         [
                           'Atrakcja 2 PL', 
                            53.41475000, 
                            14.60220358, 
                           'Atrakcja 2 PL', 
                           '#'
                         ],
                     ];
       var infoWindow= new google.maps.InfoWindow({maxWidth:600}),
           marker, i,
           image = 'http://localhost/assets/poi.png';

       for( i = 0; i < markers.length; i++ ) {
           var beach = markers[i];
           var position = new google.maps.LatLng(beach[1], beach[2]);
           bounds.extend(position);
           marker = new google.maps.Marker({
               position: position,
               map: map,
               icon: image,
               title: beach[0],
               myurl: beach[4]
           });

           google.maps.event.addListener(marker, 'click', (function(marker, i) {
               return function() {
                   infoWindow.setContent('<a href="'+marker['myurl']+'">'+marker['title']+'</a>');
                   infoWindow.open(map, marker);
               }
           })(marker, i));
           map.fitBounds(bounds);
           map.mapTypes.set('Styled', styledMapType);

       }
   }
</script>

該代碼創建了一個帶有許多標記的谷歌地圖。 在上面的例子中有 2 個點。 點位於地圖的中心。 我想補充一點：

['Main Point', 51.424150124, 14.6032790-8, 'Main Point', '#']

關於標記：

image2 = 'http://localhost/assets/poi2.png';

我怎樣才能在我的代碼中做到這一點？ 我想在地圖上有 2 種類型的標記（2 種顏色）。

Answer 1

您可以為每個點將圖像名稱添加到標記數組中嗎？

var markers = [
    ['Atrakcja 1 pl', 51.73925413, 19.51309225, 'Atrakcja 1 pl', '#', 'poi.png'],
    ['Atrakcja 2 PL', 53.41475000, 14.60220358, 'Atrakcja 2 PL', '#', 'poi.png'],
    ['Main Point', 51.424150124, 14.6032790-8, 'Main Point', '#', 'poi2.png']
];

var infoWindow= new google.maps.InfoWindow({maxWidth:600}),
marker, i;

for( i = 0; i < markers.length; i++ ) {
    var beach = markers[i];
    var position = new google.maps.LatLng(beach[1], beach[2]);
    bounds.extend(position);
    marker = new google.maps.Marker({
        position: position,
        map: map,
        icon: 'http://localhost/assets/' + beach[5],
        title: beach[0],
        myurl: beach[4]
    });

    ...
}