Google Map 图标颜色按 Fusion Table 中的值更改

Question

我在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，而且我真的只是尽我所能一起破解了这个网站。

任何帮助表示赞赏。

谢谢

马特

Answer 1

有很多预定义的标记可以用于 fusionTables（除了它们之外，没有其他方法可以应用）。

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

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

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

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

Answer 2

您可以使用 url 从Google charts 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”替换为您需要的颜色代码。