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

您可以使用网址动态请求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”替换为您所使用的颜色代码即可。

Answer 2

您可以将许多预定义标记用于fusionTables（并且无法应用其他标记）。

你会在这里找到它们：https://www.google.com/fusiontables/DataSource?docid=1BDnT5U1Spyaes0Nj3DXciJKa_tuu7CzNRXWdVA （点击visualize-＆gt; map查看它们）

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

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

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

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

2 个答案: