谷歌地图API融合表和样式地图
Google-maps API fusion table and styled map
我一直在尝试让一个融合表覆盖层与我正在制作的这个网站的样式谷歌地图一起使用,目前我有一个覆盖层在一张地图上工作,但是一旦我的风格是叠加层不想应用,我无法在我的搜索任何地方找到有关此的信息, 因此,如果有人能提供帮助,那就太好了,请听听我的带有叠加层的地图脚本
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>
相关文章:
- 无法在有角度的谷歌地图中动态传递地图样式
- 使用CSS/Javascript设计图像地图的样式
- 谷歌地图API融合表和样式地图
- 开放图层导出为 KML 并保留我的地图样式
- 在Mapbox.js中,如何在不同的地图样式之间切换
- 如何在jquery locationpicker插件中为地图添加样式
- 将动态CSS样式应用于谷歌地图的标记
- 谷歌地图样式查询
- 谷歌地图样式的地图标记没有显示
- 样式化地图和地点库Google Map API v3
- 在带样式的地图中获取路线
- 在谷歌地图样式中使用JSON文件
- 是否可以使用带有自定义地图框样式的传单版本 1
- 反应谷歌地图节点模块映射样式加载空对象,而不是JSON
- 将谷歌地图样式转换为谷歌静态地图 URI 时出现问题
- 我可以在谷歌地图样式API上隐藏非海洋吗?
- 样式化的谷歌地图没有显示
- 在谷歌地图(3.14)信息窗口中禁用CSS样式
- 谷歌地图样式&可视化地理图
- 谷歌地图API v3自定义样式地图和多个标记不显示