2

我正在使用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>
4

3 回答 3

1

我会说你需要一个数组或其他东西。这个循环：

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

我认为这意味着要么/要么并在地图上产生不止一种标记 - 实际上为“图像”产生一个变量..它会这样做：

var image = 'red.png';
var image = 'red.png';
var image = 'green.png';

但是每个 set 语句都将覆盖脚本中的下一个。

而是创建一个您调用的 JS 函数，它可以返回红色或绿色。在你做的地方：

icon: image;

你现在会做：

icon: getimage(var1, var2);

其中 var1 和 var2 等于 info.gsplat 和 due.data。无论是那个还是整个事情都需要进入循环，所以你要按顺序写出每个标记。

于 2012-05-10T20:11:37.917 回答
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>

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

于 2012-05-10T20:55:41.703 回答
0

您可以使用CSS Sprite 技术来使用各种标记：

var mImage = new google.maps.MarkerImage("/i/Images/IconsLarge.png", 
    new google.maps.Size(34, 35), 
    new google.maps.Point(0, vPos), <--- set the vertical position to match your sprite offset.
    new google.maps.Point(10, 34)
); 
//insert marker
marker = new google.maps.Marker({
    icon: mImage,
    position: new google.maps.LatLng(latitude, longitude),
    map: map
});
于 2012-05-10T18:34:29.900 回答