2011-08-15 5 views
1

私は以下のコードを使用して、GoogleマップのマーカをMySQLデータベースの位置情報を使って正しく表示しています。カスタムGoogleマップのアイコン値> = 1の場合

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>All Locations</title> 
     <link rel="stylesheet" href="css/alllocationsstyle.css" type="text/css" media="all" /> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script> 
     <script type="text/javascript"> 
      var customIcons = { 
      0: { 
      icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png', 
      shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
      }, 
      1: { 
      icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png', 
      shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
      } 
      }; 

      function load() { 
      var map = new google.maps.Map(document.getElementById("map"), { 
      center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
      zoom:6, 
      mapTypeId: 'roadmap' 
      }); 

      var infoWindow = new google.maps.InfoWindow; 

      // Change this depending on the name of your PHP file 
      downloadUrl("phpfile.php", function(data) { 
      var xml = data.responseXML; 
      var markers = xml.documentElement.getElementsByTagName("marker"); 
      for (var i = 0; i < markers.length; i++) { 
      var locationname = markers[i].getAttribute("locationname"); 
      var address = markers[i].getAttribute("address"); 
      var finds = markers[i].getAttribute("finds"); 
     var totalfinds = markers[i].getAttribute("totalfinds"); 
      var point = new google.maps.LatLng( 
      parseFloat(markers[i].getAttribute("osgb36lat")), 
      parseFloat(markers[i].getAttribute("osgb36lon"))); 
      var html = locationname + ', No.of finds: ' + "<b>" + totalfinds + "</b>"; 
      var icon = customIcons[totalfinds] || {}; 
      var marker = new google.maps.Marker({   
      map: map, 
      position: point, 
      title: address, 
      icon: icon.icon, 
      shadow: icon.shadow 
      }); 
      bindInfoWindow(marker, map, infoWindow, html); 
      } 
      }); 
      } 

      function bindInfoWindow(marker, map, infoWindow, html) { 
      google.maps.event.addListener(marker, 'click', function() { 
      infoWindow.setContent(html); 
      infoWindow.open(map, marker); 
      }); 
      } 

      function downloadUrl(url, callback) { 
      var request = window.ActiveXObject ? 
      new ActiveXObject('Microsoft.XMLHTTP') : 
      new XMLHttpRequest; 

      request.onreadystatechange = function() { 
      if (request.readyState == 4) { 
      request.onreadystatechange = doNothing; 
      callback(request, request.status); 
      } 
      }; 

      request.open('GET', url, true); 
      request.send(null); 
      } 

      function doNothing() {} 

      </script> 
      </head> 

      <body onLoad="load()"> 
       <div id="map"></div> 
      </body> 
      </html> 

それは現時点で立っているように、マーカーが示すかどうかを決定するためのコードは、赤、または緑で、フィールドのいずれかの値が「0」または「1」であるか否かを単純に純粋です。

私がしたいのは、マーカーの色を決定するために、値が「0」か「1」か「1より大きい」かを反映するようにこれを変更することです。

私の知る限りでは、私は '> 1'、 '> = 1'を使ってみましたが、うまくいきませんでした。

誰かが私を正しい方向に向けることができるかどうかは疑問に思ったので、これを動作させることができます。

+0

値が0か1かどうかを確認するコードはありません。正しいコードを貼り付けてもよろしいですか? jsfiddle.netにコードを貼り付けてリンクを提供できますか? 編集:(値> = 1は動作するはずですが、動作していないコードの完全な例を伝える方が簡単です) – plexer

+0

こんにちは、まずは投稿を読んで返信してくれてありがとうこれをもっと明確にしないために、謝罪します。私が話している行は、カスタムアイコンが '0'または '1'の値に割り当てられている場所です。私ができることをしたいのは、 '1'を「1以上」に変更することです。私は '> = 1'、 '> 0'、 'if(> = 1)'を試しましたが、残念ながら成功しませんでした。多くのありがとうと親切に感謝します。クリス – IRHM

答えて

0

@IRHM - 返信いただきありがとうございます。

あなたの例の '0'と '1'は、これらの2つのアイコンに名前を付ける単なる方法です。 「猫」と「犬」は等しく有効な名前になります。

var customIcons = { 
    cat: { 
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png', 
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
    }, 
    dog: { 
    icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png', 
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
    } 
}; 

あなたのコードは、アイコンを数えるとき、あなたはあなたが選んだ名前である0または1で終わるので、今日は仕事に起こります。 '0'または '> 1'を選択できるように変更するには、余分なロジックを追加する必要があります。置き換え:このロジックはtotalFindsの値をチェックして、あなたは(「この場合に提供名を使用してcustomIconsのアイコンのいずれかを調べるためにそれを使用しています

var icon = {}; 
if (totalFinds == 0) { 
    icon = customIcons[0]; 
} else if (totalFinds >= 1) { 
    icon = customIcons[1];  
} 

0:

var icon = customIcons[totalfinds] || {}; 

をして'または' 1 ')。

+0

ありがとうございました。あなたのソリューションは治療に役立ちます。再び誠実な感謝と親切に感謝します。クリス。 – IRHM

関連する問題