将Google Map的第一个标记着色为不同的颜色

时间:2013-06-03 15:20:37

标签: javascript google-maps-api-3

我确信这一定非常容易,但我是Javascript的新手...

我有以下代码来显示Google地图上的点列表:

<script type="text/javascript">     
var locations = [
                    ['<b>Customer</b><br>Address', 52.6699927, -0.7274620, 1],
                    ['<b>Leicester</b><br>Unit B, St Margarets Way, Leicester<br>0116 262 7355', 52.646179, -1.14004, 2],
                    ['<b>Nottingham</b><br>Victoria Retail Park, Netherfield, Nottingham<br>0115 940 0811', 52.961685, -1.06394, 3],
                    ['<b>Nuneaton</b><br>Newtown Road Nuneaton Warwickshire<br>02476 642220', 52.5245, -1.46764, 4],
                    ['<b>Peterborough</b><br>Mallory Road, Boongate, Peterborough, Cambridgeshire<br>01733 561357', 52.574116, -.219535, 5],
                    ['<b>Wellingborough</b><br>Victoria Retail Park, Whitworth Way, London Road, Wellingborough<br>01933 276225', 52.289585, -.68429, 6]     
                ];      
var map = new google.maps.Map(document.getElementById('map'), 
        {       
            zoom: 9,       
            center: new google.maps.LatLng(52.6699927, -0.7274620),       
            mapTypeId: google.maps.MapTypeId.ROADMAP     
        }
        );      
var infowindow = new google.maps.InfoWindow();      
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,
                            });                              
            google.maps.event.addListener(marker, 'click', (function(marker, i) {         return function() 
            {           infowindow.setContent(locations[i][0]);               
                        infowindow.open(map, marker);         
            }       
        })
        (marker, i));     }   


</script> 

“位置”列表中的第一个位置是地图的中心,我想仅更改此标记的颜色。我知道我可以使用icon,但我不确定如何调整for循环代码来执行此操作。

你能帮忙吗?

非常感谢提前。

1 个答案:

答案 0 :(得分:1)

  1. 在数组中第一个元素的末尾添加一个图标URL,如:

    ['<b>Customer</b><br>Address', 52.6699927, -0.7274620, 1, 'http://maps.google.com/mapfiles/ms/icons/blue.png']
    
  2. 在你的标记的定义中使用它(如果它不存在它将是“null”并且将使用默认标记。)

    marker = new google.maps.Marker({         
           position: new google.maps.LatLng(locations[i][1], locations[i][2]),         
           map: map,
           icon: locations[i][4]
         });
    
  3. working example