在Google FusionTablesLayer上显示标签文字(国家/地区名称)

时间:2015-09-14 12:38:21

标签: google-maps google-fusion-tables

我在Google桌面上通过Google Fusion桌面添加了fusionTableLayer。 但它没有显示国家名称(标签文本)。国家名称隐藏在图层后面。

如何在图层上显示国家/地区名称(标签文字)。

在此地图中,我们看不到英国/法国/印度/土耳其的名称

google-fusion-tables fusion-table-layer Style

JS代码:

function initialize() {
  var world_center = new google.maps.LatLng(30, 0);
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: world_center,
    zoom: 3,
    scrollwheel: true,
  });

  var style = [
    {
      "featureType" : "landscape",
      "elementType" : "geometry",
      "stylers" : [{"color" : "#7F7F7F"}]
    },
    {
      "featureType" : "all",
      "elementType" : "labels",
      // "stylers" : [{"visibility" : "off"}]
    },
    {
      "featureType" : "all",
      "elementType" : "labels.icon",
      "stylers" : [{"visibility" : "off"}]
    },
    {
      "featureType" : "landscape",
      "elementType" : "labels",
      "stylers" : [{"visibility" : "off"}]
    },
    {
      "featureType" : "poi",
      "stylers" : [{"visibility" : "off"}]
    },
    {
      "featureType" : "road",
      "stylers" : [{"visibility" : "off"}]
    }
  ];

  var styledMapType = new google.maps.StyledMapType(style, {
    map: map,
    name: 'Styled Map'
  });

  layer = new google.maps.FusionTablesLayer({
   query: {
     select: "name, id, gemo, location_type",
     from: table_id
   },
   options : {suppressInfoWindows:true},
   styleId:1,
   clickable:false
  });
  layer.setMap(map);

}

在融合表的 styleId 1 上。

{
 "kind": "fusiontables#styleSetting",
 "tableId": "1IbTyJDdJfQXFFmVr_5E95MQiIApiGLhkaC4ohzDM",
 "styleId": 1,
 "polygonOptions": {
  "strokeColor": "#666666",
  "strokeOpacity": 0,
  "strokeWeight": 0,
  "fillColorStyler": {
   "kind": "fusiontables#buckets",
   "columnName": "style_14",
   "buckets": [
    {
     "min": 143.5,
     "max": 144.5,
     "color": "#098d71",
     "opacity": 1
    },
    {
     "min": 144.5,
     "max": 145.5,
     "color": "#92d050",
     "opacity": 1
    },
    {
     "min": 145.5,
     "max": 146.5,
     "color": "#ebe8cf",
     "opacity": 1
    },
    {
     "min": 146.5,
     "max": 147.6,
     "color": "#cec660",
     "opacity": 1
    },
    {
     "min": 147.5,
     "max": 148.5,
     "color": "#c06e36",
     "opacity": 1
    }
   ]
  }
 }
}

1 个答案:

答案 0 :(得分:2)

一个选项:使用InfoBox作为标签。 (original google code link,googlecode被谷歌关闭)

proof of concept fiddle(需要与较小的国家进行一些调整,可能会使用MarkerManager来控制它们出现的缩放级别)

代码段

var table_id = "1IbTyJDdJfQXFFmVr_5E95MQiIApiGLhkaC4ohzDM";
var labels = [];

function initialize() {
    var world_center = new google.maps.LatLng(30, 0);
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: world_center,
        zoom: 3,
        minZoom: 2,
        scrollwheel: true,
        styles: style
    });

    var styledMapType = new google.maps.StyledMapType(style, {
        map: map,
        name: 'Styled Map'
    });

    layer = new google.maps.FusionTablesLayer({
        query: {
            select: "name, id, gemo, location_type",
            from: table_id
        },
        options: {
            suppressInfoWindows: true
        },
        styleId: 1,
        clickable: false
    });
    layer.setMap(map);
    for (var i=0; i < countriesJson.length; i++) {
    labels.push(new InfoBox({
	 content: countriesJson[i].name
	,boxStyle: {
	   border: "none"
	  ,textAlign: "center"
          ,backgroundColor:"none"
	  ,fontSize: "8pt"
	  ,width: "50px"
	 }
	,disableAutoPan: true
	,pixelOffset: new google.maps.Size(-25, 0)
	,position: new google.maps.LatLng(
        countriesJson[i].lat,countriesJson[i].lng)
	,closeBoxURL: ""
	,isHidden: false
	,enableEventPropagation: true
      }));
      labels[labels.length-1].open(map);
    }
}
google.maps.event.addDomListener(window, 'load', initialize);
var style = [{
        "featureType": "landscape",
            "elementType": "geometry",
            "stylers": [{
            "color": "#7F7F7F"
        }]
    }, {
        "featureType": "all",
            "elementType": "labels.icon",
            "stylers": [{
            "visibility": "off"
        }]
    }, {
        "featureType": "landscape",
            "elementType": "labels",
            "stylers": [{
            "visibility": "off"
        }]
    }, {
        "featureType": "poi",
            "stylers": [{
            "visibility": "off"
        }]
    }, {
        "featureType": "road",
            "stylers": [{
            "visibility": "off"
        }]
    }, {
        "featureType": "administrative",
            "elementType": "labels",
            "stylers": [{
            "visibility": "off"
        }]
    }];

var countriesJson = [{name:  "Afghanistan", lat:33.93911, lng:67.709953},
{name:  "Albania", lat:41.153332, lng:20.168331},
{name:  "Algeria", lat:28.033886, lng:1.659626},
{name:  "American Samoa", lat:-14.30602, lng:-170.696181},
{name:  "Andorra", lat:42.506285, lng:1.521801},
{name:  "Angola", lat:-11.202692, lng:17.873887},
{name:  "Anguilla", lat:18.220554, lng:-63.068615},
{name:  "Antigua and Barbuda", lat:17.060816, lng:-61.796428},
{name:  "Argentina", lat:-38.416097, lng:-63.616672},
{name:  "Armenia", lat:40.069099, lng:45.038189},
{name:  "Aruba", lat:12.52111, lng:-69.968338},
{name:  "Australia", lat:-25.274398, lng:133.775136},
{name:  "Austria", lat:47.516231, lng:14.550072},
{name:  "Azerbaijan", lat:40.143105, lng:47.576927},
{name:  "The Bahamas", lat:25.03428, lng:-77.39628},
{name:  "Bahrain", lat:26.0667, lng:50.5577},
{name:  "Bangladesh", lat:23.684994, lng:90.356331},
{name:  "Barbados", lat:13.193887, lng:-59.543198},
{name:  "Belarus", lat:53.709807, lng:27.953389},
{name:  "Belgium", lat:50.503887, lng:4.469936},
{name:  "Belize", lat:17.189877, lng:-88.49765},
{name:  "Benin", lat:9.30769, lng:2.315834},
{name:  "Bermuda", lat:32.3078, lng:-64.7505},
{name:  "Bhutan", lat:27.514162, lng:90.433601},
{name:  "Bolivia", lat:-16.290154, lng:-63.588653},
{name:  "Bosnia and Herzegovina", lat:43.915886, lng:17.679076},
{name:  "Botswana", lat:-22.328474, lng:24.684866},
{name:  "Bouvet Island", lat:-54.423199, lng:3.413194},
{name:  "Brazil", lat:-14.235004, lng:-51.92528},
{name:  "British Indian Ocean Territory", lat:-7.334623, lng:72.424251},
{name:  "Brunei", lat:4.535277, lng:114.727669},
{name:  "Bulgaria", lat:42.733883, lng:25.48583},
{name:  "Burkina Faso", lat:12.238333, lng:-1.561593},
{name:  "Burundi", lat:-3.373056, lng:29.918886},
{name:  "Cambodia", lat:12.565679, lng:104.990963},
{name:  "Cameroon", lat:7.369722, lng:12.354722},
{name:  "Canada", lat:56.130366, lng:-106.346771},
{name:  "Cape Verde", lat:15.120142, lng:-23.605172},
{name:  "Cayman Islands", lat:19.3133, lng:-81.2546},
{name:  "Central African Republic", lat:6.611111, lng:20.939444},
{name:  "Chad", lat:15.454166, lng:18.732207},
{name:  "Chile", lat:-35.675147, lng:-71.542969},
{name:  "China", lat:35.86166, lng:104.195397},
{name:  "Christmas Island", lat:-10.447525, lng:105.690449},
{name:  "Cocos (Keeling) Islands", lat:-12.170874, lng:96.841739},
{name:  "Colombia", lat:4.570868, lng:-74.297333},
{name:  "Comoros", lat:-11.6455, lng:43.3333},
{name:  "Republic of the Congo", lat:-0.228021, lng:15.827659},
{name:  "Democratic Republic of the Congo", lat:-4.038333, lng:21.758664},
{name:  "Cook Islands", lat:-21.236736, lng:-159.777671},
{name:  "Costa Rica", lat:9.748917, lng:-83.753428},
{name:  "Côte d'Ivoire", lat:7.539989, lng:-5.54708},
{name:  "Croatia", lat:45.1, lng:15.2},
{name:  "Cuba", lat:21.521757, lng:-77.781167},
{name:  "Cyprus", lat:35.126413, lng:33.429859},
{name:  "Czech Republic", lat:49.817492, lng:15.472962},
{name:  "Denmark", lat:56.26392, lng:9.501785},
{name:  "Djibouti", lat:11.825138, lng:42.590275},
{name:  "Dominica", lat:15.414999, lng:-61.370976},
{name:  "Dominican Republic", lat:18.735693, lng:-70.162651},
{name:  "Ecuador", lat:-1.831239, lng:-78.183406},
{name:  "Egypt", lat:26.820553, lng:30.802498},
{name:  "El Salvador", lat:13.794185, lng:-88.89653},
{name:  "Equatorial Guinea", lat:1.650801, lng:10.267895},
{name:  "Eritrea", lat:15.179384, lng:39.782334},
{name:  "Estonia", lat:58.595272, lng:25.013607},
{name:  "Ethiopia", lat:9.145, lng:40.489673},
{name:  "FIQQ 1ZZ, Falkland Islands (Islas Malvinas)", lat:-51.796253, lng:-59.523613},
{name:  "Faroe Islands", lat:61.892635, lng:-6.911806},
{name:  "Fiji", lat:-17.713371, lng:178.065032},
{name:  "Finland", lat:61.92411, lng:25.748151},
{name:  "France", lat:46.227638, lng:2.213749},
{name:  "French Guiana", lat:3.933889, lng:-53.125782},
{name:  "French Polynesia", lat:-17.679742, lng:-149.406843},
{name:  "French Southern and Antarctic Lands", lat:-49.280366, lng:69.348557},
{name:  "Gabon", lat:-0.803689, lng:11.609444},
{name:  "The Gambia", lat:13.443182, lng:-15.310139},
{name:  "Georgia", lat:42.315407, lng:43.356892},
{name:  "Germany", lat:51.165691, lng:10.451526},
{name:  "Ghana", lat:7.946527, lng:-1.023194},
{name:  "Gibraltar", lat:36.140751, lng:-5.353585},
{name:  "Greece", lat:39.074208, lng:21.824312},
{name:  "Greenland", lat:71.706936, lng:-42.604303},
{name:  "Grenada", lat:12.1165, lng:-61.679},
{name:  "Guadeloupe", lat:16.265, lng:-61.551},
{name:  "Guam", lat:13.444304, lng:144.793731},
{name:  "Guatemala", lat:15.783471, lng:-90.230759},
{name:  "Guinea", lat:9.945587, lng:-9.696645},
{name:  "Guyana", lat:4.860416, lng:-58.93018},
{name:  "Haiti", lat:18.971187, lng:-72.285215},
{name:  "Heard Island and McDonald Islands", lat:-53.08181, lng:73.504158},
{name:  "Honduras", lat:15.199999, lng:-86.241905},
{name:  "Hong Kong", lat:22.396428, lng:114.109497},
{name:  "Hungary", lat:47.162494, lng:19.503304},
{name:  "Iceland", lat:64.963051, lng:-19.020835},
{name:  "India", lat:20.593684, lng:78.96288},
{name:  "Indonesia", lat:-0.789275, lng:113.921327},
{name:  "Iran", lat:32.427908, lng:53.688046},
{name:  "Iraq", lat:33.223191, lng:43.679291},
{name:  "Ireland", lat:53.41291, lng:-8.24389},
{name:  "Israel", lat:31.046051, lng:34.851612},
{name:  "Italy", lat:41.87194, lng:12.56738},
{name:  "Jamaica", lat:18.109581, lng:-77.297508},
{name:  "Japan", lat:36.204824, lng:138.252924},
{name:  "Jordan", lat:30.585164, lng:36.238414},
{name:  "Kazakhstan", lat:48.019573, lng:66.923684},
{name:  "Kenya", lat:-0.023559, lng:37.906193},
{name:  "Kiribati", lat:1.870883, lng:-157.363026},
{name:  "North Korea", lat:40.339852, lng:127.510093},
{name:  "South Korea", lat:35.907757, lng:127.766922},
{name:  "Kuwait", lat:29.31166, lng:47.481766},
{name:  "Kyrgyzstan", lat:41.20438, lng:74.766098},
{name:  "Laos", lat:19.85627, lng:102.495496},
{name:  "Latvia", lat:56.879635, lng:24.603189},
{name:  "Lebanon", lat:33.854721, lng:35.862285},
{name:  "Lesotho", lat:-29.609988, lng:28.233608},
{name:  "Liberia", lat:6.428055, lng:-9.429499},
{name:  "Libya", lat:26.3351, lng:17.228331},
{name:  "Liechtenstein", lat:47.166, lng:9.555373},
{name:  "Lithuania", lat:55.169438, lng:23.881275},
{name:  "Luxembourg", lat:49.815273, lng:6.129583},
{name:  "Macau", lat:22.198745, lng:113.543873},
{name:  "Macedonia (FYROM)", lat:41.608635, lng:21.745275},
{name:  "Madagascar", lat:-18.766947, lng:46.869107},
{name:  "Malawi", lat:-13.254308, lng:34.301525},
{name:  "Malawi", lat:-13.254308, lng:34.301525},
{name:  "Malaysia", lat:4.210484, lng:101.975766},
{name:  "Maldives", lat:1.977247, lng:73.536103},
{name:  "Mali", lat:17.570692, lng:-3.996166},
{name:  "Malta", lat:35.937496, lng:14.375416},
{name:  "Marshall Islands", lat:6.068394, lng:171.989379},
{name:  "Martinique", lat:14.641528, lng:-61.024174},
{name:  "Mauritania", lat:21.00789, lng:-10.940835},
{name:  "Mauritius", lat:-20.348404, lng:57.552152},
{name:  "Mayotte", lat:-12.8275, lng:45.166244},
{name:  "Mexico", lat:23.634501, lng:-102.552784},
{name:  "Federated States of Micronesia", lat:6.887481, lng:158.215072},
{name:  "Moldova", lat:47.411631, lng:28.369885},
{name:  "Monaco", lat:43.738418, lng:7.424616},
{name:  "Mongolia", lat:46.862496, lng:103.846656},
{name:  "Montserrat", lat:16.742498, lng:-62.187366},
{name:  "Montenegro", lat:42.708678, lng:19.37439},
{name:  "Morocco", lat:31.791702, lng:-7.09262},
{name:  "Mozambique", lat:-18.665695, lng:35.529562},
{name:  "Myanmar (Burma)", lat:21.913965, lng:95.956223},
{name:  "Namibia", lat:-22.95764, lng:18.49041},
{name:  "Nauru", lat:-0.522778, lng:166.931503},
{name:  "Nepal", lat:28.394857, lng:84.124008},
{name:  "Netherlands", lat:52.132633, lng:5.291266},
{name:  "Netherlands Antilles", lat:12.20189, lng:-68.262382},
{name:  "New Caledonia", lat:-20.904305, lng:165.618042},
{name:  "New Zealand", lat:-40.900557, lng:174.885971},
{name:  "Nicaragua", lat:12.865416, lng:-85.207229},
{name:  "Niger", lat:17.607789, lng:8.081666},
{name:  "Nigeria", lat:9.081999, lng:8.675277},
{name:  "Niue", lat:-19.054445, lng:-169.867233},
{name:  "Norfolk Island", lat:-29.040835, lng:167.954712},
{name:  "Northern Mariana Islands", lat:15.0979, lng:145.6739},
{name:  "Norway", lat:60.472024, lng:8.468946},
{name:  "Oman", lat:21.512583, lng:55.923255},
{name:  "Pakistan", lat:30.375321, lng:69.345116},
{name:  "Palau", lat:7.51498, lng:134.58252},
{name:  "Palestine", lat:31.952162, lng:35.233154},
{name:  "Panama", lat:8.537981, lng:-80.782127},
{name:  "Papua New Guinea", lat:-6.314993, lng:143.95555},
{name:  "Paraguay", lat:-23.442503, lng:-58.443832},
{name:  "Peru", lat:-9.189967, lng:-75.015152},
{name:  "Philippines", lat:12.879721, lng:121.774017},
{name:  "Pitcairn Islands", lat:-24.376745, lng:-128.324235},
{name:  "Poland", lat:51.919438, lng:19.145136},
{name:  "Portugal", lat:39.399872, lng:-8.224454},
{name:  "Puerto Rico", lat:18.220833, lng:-66.590149},
{name:  "Qatar", lat:25.354826, lng:51.183884},
{name:  "Reunion", lat:-21.115141, lng:55.536384},
{name:  "Romania", lat:45.943161, lng:24.96676},
{name:  "Russia", lat:61.52401, lng:105.318756},
{name:  "Rwanda", lat:-1.940278, lng:29.873888},
{name:  "Rwanda", lat:-1.940278, lng:29.873888},
{name:  "Saint Helena", lat:-15.965528, lng:-5.711485},
{name:  "Saint Kitts and Nevis", lat:17.357822, lng:-62.782998},
{name:  "Saint Lucia", lat:13.909444, lng:-60.978893},
{name:  "Saint Pierre and Miquelon", lat:46.8852, lng:-56.3159},
{name:  "Saint Vincent and the Grenadines", lat:13.252818, lng:-61.197163},
{name:  "Samoa", lat:-13.759029, lng:-172.104629},
{name:  "San Marino", lat:43.94236, lng:12.457777},
{name:  "São Tomé and Príncipe", lat:0.18636, lng:6.613081},
{name:  "Saudi Arabia", lat:23.885942, lng:45.079162},
{name:  "Senegal", lat:14.497401, lng:-14.452362},
{name:  "Serbia", lat:44.016521, lng:21.005859},
{name:  "Seychelles", lat:-4.679574, lng:55.491977},
{name:  "Sierra Leone", lat:8.460555, lng:-11.779889},
{name:  "Singapore", lat:1.352083, lng:103.819836},
{name:  "Slovakia", lat:48.669026, lng:19.699024},
{name:  "Slovenia", lat:46.151241, lng:14.995463},
{name:  "Solomon Islands", lat:-9.64571, lng:160.156194},
{name:  "Somalia", lat:5.152149, lng:46.199616},
{name:  "South Africa", lat:-30.559482, lng:22.937506},
{name:  "South Georgia and the South Sandwich Islands", lat:-54.429579, lng:-36.587909},
{name:  "Spain", lat:40.463667, lng:-3.74922},
{name:  "Sri Lanka", lat:7.873054, lng:80.771797},
{name:  "Sudan", lat:12.862807, lng:30.217636},
{name:  "Suriname", lat:3.919305, lng:-56.027783},
{name:  "Svalbard and Jan Mayen", lat:77.553604, lng:23.670272},
{name:  "Swaziland", lat:-26.522503, lng:31.465866},
{name:  "Sweden", lat:60.128161, lng:18.643501},
{name:  "Switzerland", lat:46.818188, lng:8.227512},
{name:  "Syria", lat:34.802075, lng:38.996815},
{name:  "Taiwan", lat:23.69781, lng:120.960515},
{name:  "Tajikistan", lat:38.861034, lng:71.276093},
{name:  "Tanzania", lat:-6.369028, lng:34.888822},
{name:  "Thailand", lat:15.870032, lng:100.992541},
{name:  "Timor-Leste", lat:-8.874217, lng:125.727539},
{name:  "Togo", lat:8.619543, lng:0.824782},
{name:  "Tokelau", lat:-9.2002, lng:-171.8484},
{name:  "Tonga", lat:-21.178986, lng:-175.198242},
{name:  "Trinidad and Tobago", lat:10.691803, lng:-61.222503},
{name:  "Tunisia", lat:33.886917, lng:9.537499},
{name:  "Turkey", lat:38.963745, lng:35.243322},
{name:  "Turkmenistan", lat:38.969719, lng:59.556278},
{name:  "Turks and Caicos Islands", lat:21.694025, lng:-71.797928},
{name:  "Tuvalu", lat:-7.478442, lng:178.679921},
{name:  "Uganda", lat:1.373333, lng:32.290275},
{name:  "Ukraine", lat:48.379433, lng:31.16558},
{name:  "United Arab Emirates", lat:23.424076, lng:53.847818},
{name:  "United Kingdom", lat:55.378051, lng:-3.435973},
{name:  "United States", lat:37.09024, lng:-95.712891},
{name:  "Uruguay", lat:-32.522779, lng:-55.765835},
{name:  "Uzbekistan", lat:41.377491, lng:64.585262},
{name:  "Vanuatu", lat:-15.376706, lng:166.959158},
{name:  "Venezuela", lat:6.42375, lng:-66.58973},
{name:  "Vietnam", lat:14.058324, lng:108.277199},
{name:  "British Virgin Islands", lat:18.420695, lng:-64.639968},
{name:  "U.S. Virgin Islands", lat:18.335765, lng:-64.896335},
{name:  "Wallis and Futuna", lat:-14.2938, lng:-178.1165},
{name:  "Western Sahara", lat:24.215527, lng:-12.885834},
{name:  "Yemen", lat:15.552727, lng:48.516388},
{name:  "Zambia", lat:-13.133897, lng:27.849332},
{name:  "Zimbabwe", lat:-19.015438, lng:29.154857}];
html, body, #map-canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>