谷歌地图API融合表和样式地图

Google-maps API fusion table and styled map

本文关键字:样式 地图 API 融合 谷歌地图      更新时间:2023-09-26

我一直在尝试让一个融合表覆盖层与我正在制作的这个网站的样式谷歌地图一起使用,目前我有一个覆盖层在一张地图上工作,但是一旦我的风格是叠加层不想应用,我无法在我的搜索任何地方找到有关此的信息, 因此,如果有人能提供帮助,那就太好了,请听听我的带有叠加层的地图脚本

      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
});

不要将 fusionTablesLayer 的 map 属性设置为 styledMap ,这不是google.maps.Map对象(改用 map)。

此外,您需要将FusionTablesLayer的初始化保留在initMap函数中(出于几个原因)。

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"
  }]
}];
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>