2

私はcoldfusionを使用してGoogleマップを作成しています - そして私は物事のために異なる色のマーカーが欲しいです

Google マップ 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>

これは、/ またはマップ上に複数の種類のマーカーを作成することを意図していると思います-実際には「画像」に対して1つの変数を生成します..それは次のようになります:

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

ただし、各 set ステートメントは、スクリプト内の次の on を上書きします。

代わりに、赤または緑のいずれかを戻す 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 スプライト テクニックを使用して、さまざまなマーカーを使用できます。

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 に答える