google-maps-api-3 - Google map 图标颜色按 Fusion Table 中的值变化

Question

我有一个网站 http://www.gfmap.com它显示了无麸质餐厅、商店、面包店等。它是在包含 20,000 多种商品的 Fusion Table 上运行的。

我想知道是否可以根据类别(餐厅等)更改 Google map 图标颜色

这是代码...

<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，只是尽我所能地破解了这个网站。

感谢任何帮助。

谢谢

马特

Answer 1

有很多预定义标记可用于 fusionTable(并且无法应用除它们之外的其他标记)。

您可以在这里找到它们:https://www.google.com/fusiontables/DataSource?docid=1BDnT5U1Spyaes0Nj3DXciJKa_tuu7CzNRXWdVA(点击可视化-> map 查看它们)

您可以将它们用于图层的样式，例如:

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

演示:http://jsfiddle.net/doktormolle/5MuL4/