为Google Map的第一个标记着色另一种颜色 [英] Colour the first marker of a Google Map a different colour

问题描述

我有下面的代码来显示一个点的列表。

我确信这一定很容易，但我是一个JavaScript的新手......在谷歌地图上：

 < script type =text / javascript> 
 var locations = [
 ['< b> Customer< / b>< br> Address'，52.6699927，-0.7274620,1]，
 ['< b> Leicester< / b>< br>单元B，St Margarets Way，Leicester< br> 0116 262 7355'，52.646179，-1.14004，2]，
 ['< b>诺丁汉< / b>< br> Victoria Retail Park，Netherfield，Nottingham'0115 940 0811'，52.961685，-1.06394，3]，
 ['< b> Nuneaton< / b> Newtown Road Nuneaton沃里克郡02476 642220'，52.5245，-1.46764,4]，
 ['b< b> Peterborough< b> Mallory Road，Boongate，Peterborough，Cambridgeshire< br> 01733 561357'，52.574116，-.219535 ，5英镑，
 ['< b> Wellingborough< / b>维多利亚零售公园，惠特沃斯路，伦敦路，威灵伯勒01933 276225'，52.289585，-.68429,6] b $ b]; 
 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; 
 
（i = 0; i< locations.length; i ++）{
 marker = new google.maps.Marker（{
 position：new google.maps.LatLng （位置[i] [1]，位置[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> 
  

'位置'列表中的第一个位置是地图的中心，我想仅更改此标记的颜色。我知道我可以使用图标，但我不确定如何调整循环代码的来完成。 p>



您能帮忙吗？



非常感谢。


解决方案

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] 
   }）; 
     

工作示例

I'm sure this must be very easy, but I'm a novice at Javascript...

I have the following code to display a list of points on a google map:

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

The first location in the 'locations' list is the centre of the map, and I would like to change the colour for this marker only. I understand that I can use icon, but am unsure how to adjust the for loop code to do so.

Can you help?

Many thanks in advance.

解决方案

1. add an icon URL to the end of the first element in your array, something like:

   ['<b>Customer</b><br>Address', 52.6699927, -0.7274620, 1, 'http://maps.google.com/mapfiles/ms/icons/blue.png']
   

2. use that in the definition of your marker (if it isn't there it will be "null" and the default marker will be used).

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

working example

这篇关于为Google Map的第一个标记着色另一种颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！