Google-maps API融合表和样式化地图

Question

香港专业教育学院一直试图获得一个融合表格覆盖与我正在制作的这个网站的风格谷歌地图一起工作，目前我有一个地图上的叠加工作，但一旦我的风格是叠加不想申请，ihavent能够在任何地方找到关于此搜索的信息，所以如果有人能帮助我们做到这一点，那么请听听我的地图上的脚本

      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 3,
	      mapTypeId: google.maps.MapTypeId.ROADMAP
        });
	var world_geometry = new google.maps.FusionTablesLayer({
  		query: {
    		select: 'geometry',
    	from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk'
      },
      map: map,
      suppressInfoWindows: true
});
    }

以下是带样式化地图的代码，但叠加层不起作用：

      var map;
      function initMap() {
        var styles = [
          {
              "featureType": "administrative",
              "elementType": "labels.text.fill",
              "stylers": [ { "color": "#444444"  } ]
          },
          {
              "featureType": "landscape",
              "elementType": "all",
              "stylers": [{"color": "#FF00FF"}]
          },
          {
              "featureType": "poi",
              "elementType": "all",
              "stylers": [{"visibility": "off"}]
          },
          {
              "featureType": "road",
              "elementType": "all",
              "stylers": [{"saturation": -100
                  },
                  {"lightness": 45}]
          },
            {
                "featureType": "road.highway",
                "elementType": "all",
                "stylers": [{"visibility": "simplified"}]
            },
            {
                "featureType": "road.arterial",
                "elementType": "labels.icon",
                "stylers": [{"visibility": "off"}]
            },
            {
                "featureType": "transit",
                "elementType": "all",
                "stylers": [{"visibility": "off"}]
            },
            {
                "featureType": "water",
                "elementType": "all",
                "stylers": [{"color": "#00FF00"
                    },
                    {"visibility": "on"}]
            }
        ];
    var styledMap = new google.maps.StyledMapType( styles, {name: "Styled Map"});
    var mapOptions = {
        zoom: 3,
        center: {lat: -34.397, lng: 150.644},
        mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] }
    };
    var map = new google.maps.Map(document.getElementById('map'),
        mapOptions);
        map.mapTypes.set('map_style', styledMap);
        map.setMapTypeId('map_style');
        map.setOptions({ minZoom: 3, maxZoom: 15 });
    };
    var world_geometry = new google.maps.FusionTablesLayer({
        query: {
            select: 'geometry',
        from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk'
    },
        map: styledMap,
        suppressInfoWindows: true
});

Answer 1

不要将fusionTablesLayer的map属性设置为styledMap，而不是google.maps.Map对象（而是使用map）。< / p>

此外，您需要在FusionTablesLayer函数内保持initMap的初始化（出于几个原因）。

＆＃13;

＆＃13;

function initMap() {
  var styledMap = new google.maps.StyledMapType(styles, {
    name: "Styled Map"
  });
  var mapOptions = {
    zoom: 3,
    center: {
      lat: -34.397,
      lng: 150.644
    },
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
  };
  var map = new google.maps.Map(document.getElementById('map'),
    mapOptions);
  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');
  map.setOptions({
    minZoom: 3,
    maxZoom: 15
  });
  var world_geometry = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry',
      from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk'
    },
    map: map,
    suppressInfoWindows: true
  });
}
google.maps.event.addDomListener(window, "load", initMap);
var styles = [{
  "featureType": "administrative",
  "elementType": "labels.text.fill",
  "stylers": [{
    "color": "#444444"
  }]
}, {
  "featureType": "landscape",
  "elementType": "all",
  "stylers": [{
    "color": "#FF00FF"
  }]
}, {
  "featureType": "poi",
  "elementType": "all",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "road",
  "elementType": "all",
  "stylers": [{
    "saturation": -100
  }, {
    "lightness": 45
  }]
}, {
  "featureType": "road.highway",
  "elementType": "all",
  "stylers": [{
    "visibility": "simplified"
  }]
}, {
  "featureType": "road.arterial",
  "elementType": "labels.icon",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "transit",
  "elementType": "all",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "water",
  "elementType": "all",
  "stylers": [{
    "color": "#00FF00"
  }, {
    "visibility": "on"
  }]
}];

＆＃13;

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

＆＃13;

＆＃13;

＆＃13;