Question

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

使用Google Maps API v3

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

思考？任何输入的Thanx

 <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

我说你需要一个阵列或其他东西。这个循环：

<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。无论是那个还是整个事物都需要进入循环内部，所以你要按顺序写出每个标记。

Answer 2

您正在混合使用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>

代码也没有优化......但这是另一回事： - ）

Answer 3

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

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
});

谷歌地图v3 - 多个标记 - 不同的颜色

3 个答案: