javascript - Google map v3 - 多个标记 - 不同颜色

Question

我正在使用 coldfusion 填充谷歌地图 - 我想要不同颜色的标记

使用谷歌地图 API v3

此代码有效，但它们都是 1 标记颜色 - 绿色始终显示 - 我无法显示不同的颜色。

想法？感谢任何输入

 <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 

 <script type="text/javascript"> 

 var locations = 
[ 
<cfloop query=due>
<cfoutput>
<cfquery name="info" datasource="data">
SELECT * FROM data
WHERE id = #due.id#
</cfquery>
<cfif info.gpslat is not "">["#info.id#", #info.gpslat#, #info.gpslong#,      #info.id#],</cfif>
</cfoutput>
</cfloop> 
]; 

 var map = new google.maps.Map(document.getElementById('map'), { 
  zoom: 14, 
  center: new google.maps.LatLng(51.19, -114.48),
  mapTypeId: google.maps.MapTypeId.HYBRID
 }); 

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

 <cfloop query=due>
<cfquery name="info" datasource="data">
SELECT * FROM data
WHERE id = #due.id#
</cfquery>

       var marker, i;

<cfif info.gpslat is not "">    
   <cfif due.data is 'yes'>
   var image = 'red.png'; 
   </cfif>
   <cfif due.data is 'no'>
   var image = 'green.png'; 
   </cfif>
</cfif>
</cfloop> 


 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,
    icon: image
  }); 

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


 </script> 

Answer 1

您正在混合使用 javascript 和 ColdFusion 代码，因此拍摄的标记图像是循环中最后一个可用的图像。可能有用的东西是

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 

<script type="text/javascript"> 

    var locations = 
    [ 
    <cfloop query=due>
    <cfoutput>
    <cfquery name="info" datasource="data">
    SELECT * FROM data
    WHERE id = #due.id#
    </cfquery>
    <cfif info.gpslat is not "">['#info.id#', #info.gpslat#, #info.gpslong#,#info.id#,<cfif due.data is "yes>'red.png'<cfelse>'green.png'</cfif>],</cfif>
    </cfoutput>
    </cfloop> 
    ]; 

    var map = new google.maps.Map(document.getElementById('map'), { 
        zoom: 14, 
        center: new google.maps.LatLng(51.19, -114.48),
        mapTypeId: google.maps.MapTypeId.HYBRID
    }); 

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

    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,
        icon: locations[i][4]
    }); 

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
            return function() { 
                infowindow.setContent(locations[i][0]); 
                infowindow.open(map, marker); 
            } 
        })(marker, i)); 
    } 
</script> 

代码也没有优化......但那是另一回事:-)