3

私はhttp://www.gfmap.comにウェブサイトを持っており、グルテンフリーのレストラン、ショップ、ベーカリーなどを表示しています。20,000 を超えるアイテムを備えた Fusion Table から運営されています。

カテゴリ（レストランなど）に基づいて Google マップのアイコンの色を変更できるかどうかを知りたい

これがコードです...

<script type="text/javascript">     
 var initialLocation; 
 var companyLocale = new google.maps.LatLng(-33.869629, 151.206955); 
 var localArray = [companyLocale]; 
 var noGeo = new google.maps.LatLng(51.506325, -0.127144);        
 var map;    
 var layerl0;    
 function initialize() {
    map = new google.maps.Map(document.getElementById('themap'),
     {
        zoom: 12 
     });
    if(navigator.geolocation) {
        browserSupportFlag = true;
        navigator.geolocation.getCurrentPosition(function(position) {
        initialLocation = new     google.maps.LatLng(position.coords.latitude,position.coords.longitude);
        map.setCenter(initialLocation);
    }, function() {
        handleNoGeolocation(browserSupportFlag);
       });
    }else {
       handleNoGeolocation();
    }
function handleNoGeolocation() {
  initialLocation = noGeo;
  localArray.unshift(initialLocation);
  map.setCenter(initialLocation);
}
    var style = [
    {
      featureType: 'administrative.land_parcel',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    }
  ];

    var styledMapType = new google.maps.StyledMapType(style, {
      map: map,
      name: 'Styled Map'
    });
  map.mapTypes.set('map-style', styledMapType);
  map.setMapTypeId('map-style');
  layerl0 = new google.maps.FusionTablesLayer({
    query: {
      select: "'location'",
      from: 4015038
    },
    map: map
  });
}
function changeMapl0() {
  var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
  layerl0.setOptions({
    query: {
      select: "'location'",
      from: 4015038,
      where: "'Type' = '" + searchString + "'"
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
function ga() {
  var address = document.getElementById('q').value;
  if (address != ''){
    var geocoder = new google.maps.Geocoder();
        geocoder.geocode( { 'address': address + ' AU'}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            if (results[0].geometry.location_type == google.maps.GeocoderLocationType.APPROXIMATE){
              map.setZoom(12);
            } else {map.setZoom(12);}
          }
          else {alert("Sorry, we can't find that place using Google.");}
        });

  }
}
</script>
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-31494612-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

答えはこの投稿Custom Google Map Icon If Value >=1に関連していると思いますが、うまくいきません。私は JavaScript を知りませんが、この Web サイトをできる限り一緒にハッキングしました。

どんな助けでも感謝します。

ありがとう

マット

4

2 に答える 2

1

次の URL を使用して、 Google チャート APIからアイコン画像を動的にリクエストできます。

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569

これは次のようになります:画像は21x43ピクセルで、ピンの先端は(10, 34)の位置にあります

また、別の影の画像も必要になります (近くのアイコンと重ならないようにするため):

http://chart.apis.google.com/chart?chst=d_map_pin_shadow

これは次のようになります:画像は40x37ピクセルで、ピンの先端は(12, 35)の位置にあります

MarkerImageを作成するときは、それに応じてサイズとアンカー ポイントを設定する必要があります。

    var pinColor = "FE7569";
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));
    var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
        new google.maps.Size(40, 37),
        new google.maps.Point(0, 0),
        new google.maps.Point(12, 35));

次に、次の方法でマーカーをマップに追加できます。

        var marker = new google.maps.Marker({
                position: new google.maps.LatLng(0,0), 
                map: map,
                icon: pinImage,
                shadow: pinShadow
            });

「FE7569」を目的のカラーコードに置き換えるだけです。

于 2013-01-09T12:24:03.600 に答える
1

FusionTables に使用できる定義済みのマーカーが多数あります (それら以外のマーカーを適用する方法はありません)。

ここでそれらを見つけることができます: https://www.google.com/fusiontables/DataSource?docid=1BDnT5U1Spyaes0Nj3DXciJKa_tuu7CzNRXWdVA (視覚化 -> マップをクリックして表示)

レイヤーのスタイリングに使用できます。例:

styles:[{
            where: "Type='Restaurant'",
            markerOptions: {iconName: "rec_dining"}
          }]

デモ: http://jsfiddle.net/doktormolle/5MuL4/

于 2013-01-09T14:08:27.647 に答える