谷歌地图API - 将融合表层到风格图层
问题描述:
我很新的编码,我还没有真正与它在所有工作过,并与创建自定义的地图上,我还可以显示受命一些标记。我已经成功地制作了一张显示标记和另一张具有自定义样式的地图的地图。但是,我无法弄清楚如何将这两者结合在一起。谷歌地图API - 将融合表层到风格图层
目前我有这一点,这显示风格的地图,但没有标记,我就如何在从这里移动完全一无所知。
function initMap() {
var styledMapType = new google.maps.StyledMapType(
[
{elementType: 'geometry', stylers: [{color: '#C6BBB2'}]},
{elementType: 'labels.text.fill', stylers: [{color: '#523735'}]},
{elementType: 'labels.text.stroke', stylers: [{color: '#f5f1e6'}]},
{
featureType: 'administrative',
elementType: 'geometry.stroke',
stylers: [{color: '#C6BBB2'}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'geometry.stroke',
stylers: [{color: '#dcd2be'}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'labels.text.fill',
stylers: [{color: '#ae9e90'}]
},
{
featureType: 'landscape.natural',
elementType: 'geometry',
stylers: [{color: '#C1B4AB'}]
},
{
featureType: 'poi',
elementType: 'geometry',
stylers: [{color: '#C6BBB2'}]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{color: '#93817c'}]
},
{
featureType: 'poi.park',
elementType: 'geometry.fill',
stylers: [{color: '#D3D3D3'}]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{color: '#788F88'}]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{color: '#FFB9C5'}]
},
{
featureType: 'road.arterial',
elementType: 'geometry',
stylers: [{color: '#FFB9C5'}]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{color: '#FFB9C5'}]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{color: '#FF6D82'}]
},
{
featureType: 'road.highway.controlled_access',
elementType: 'geometry',
stylers: [{color: '#FFB9C5'}]
},
{
featureType: 'road.highway.controlled_access',
elementType: 'geometry.stroke',
stylers: [{color: '#FF906D'}]
},
{
featureType: 'road.local',
elementType: 'labels.text.fill',
stylers: [{color: '#806b63'}]
},
{
featureType: 'transit.line',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'transit.line',
elementType: 'labels.text.fill',
stylers: [{color: '#8f7d77'}]
},
{
featureType: 'transit.line',
elementType: 'labels.text.stroke',
stylers: [{color: '#ebe3cd'}]
},
{
featureType: 'transit.station',
elementType: 'geometry',
stylers: [{color: '#C6BBB2'}]
},
{
featureType: 'water',
elementType: 'geometry.fill',
stylers: [{color: '#BAC6C2'}]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{color: '#BAC6C2'}]
}
],
{name: 'Styled Map'});
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 59.329314, lng: 18.068579},
zoom: 10,
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
'styled_map']
}
});
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
}
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'X',
from: '1GofM5ligrJNdXrv3wtJ8FMVeHIS5uGMJ85-SzoCF'
}
});
任何建议将非常赞赏,因为我是非常非常新的这一点。
答
您层实例应该是initMap函数里面,你需要设置该图层的地图。
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'X',
from: '1GofM5ligrJNdXrv3wtJ8FMVeHIS5uGMJ85-SzoCF'
}
});
layer.setMap(map);
看到这里的工作例如:http://jsbin.com/yajuxoj/edit?html,css,js,output
下面是示例应用程序的代码,你也可以看到,在这里通过运行代码片段检查样品:
function initMap() {
var styledMapType = new google.maps.StyledMapType(
[{
elementType: 'geometry',
stylers: [{
color: '#C6BBB2'
}]
},
{
elementType: 'labels.text.fill',
stylers: [{
color: '#523735'
}]
},
{
elementType: 'labels.text.stroke',
stylers: [{
color: '#f5f1e6'
}]
},
{
featureType: 'administrative',
elementType: 'geometry.stroke',
stylers: [{
color: '#C6BBB2'
}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'geometry.stroke',
stylers: [{
color: '#dcd2be'
}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'labels.text.fill',
stylers: [{
color: '#ae9e90'
}]
},
{
featureType: 'landscape.natural',
elementType: 'geometry',
stylers: [{
color: '#C1B4AB'
}]
},
{
featureType: 'poi',
elementType: 'geometry',
stylers: [{
color: '#C6BBB2'
}]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{
color: '#93817c'
}]
},
{
featureType: 'poi.park',
elementType: 'geometry.fill',
stylers: [{
color: '#D3D3D3'
}]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{
color: '#788F88'
}]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{
color: '#FFB9C5'
}]
},
{
featureType: 'road.arterial',
elementType: 'geometry',
stylers: [{
color: '#FFB9C5'
}]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{
color: '#FFB9C5'
}]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{
color: '#FF6D82'
}]
},
{
featureType: 'road.highway.controlled_access',
elementType: 'geometry',
stylers: [{
color: '#FFB9C5'
}]
},
{
featureType: 'road.highway.controlled_access',
elementType: 'geometry.stroke',
stylers: [{
color: '#FF906D'
}]
},
{
featureType: 'road.local',
elementType: 'labels.text.fill',
stylers: [{
color: '#806b63'
}]
},
{
featureType: 'transit.line',
elementType: 'geometry',
stylers: [{
color: '#dfd2ae'
}]
},
{
featureType: 'transit.line',
elementType: 'labels.text.fill',
stylers: [{
color: '#8f7d77'
}]
},
{
featureType: 'transit.line',
elementType: 'labels.text.stroke',
stylers: [{
color: '#ebe3cd'
}]
},
{
featureType: 'transit.station',
elementType: 'geometry',
stylers: [{
color: '#C6BBB2'
}]
},
{
featureType: 'water',
elementType: 'geometry.fill',
stylers: [{
color: '#BAC6C2'
}]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{
color: '#BAC6C2'
}]
}
], {
name: 'Styled Map'
});
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 59.329314,
lng: 18.068579
},
zoom: 10,
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
'styled_map'
]
}
});
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'X',
from: '1GofM5ligrJNdXrv3wtJ8FMVeHIS5uGMJ85-SzoCF'
}
});
layer.setMap(map);
}
#map {
height: 500px;
width: 500px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample</title>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKQX3cyZ7pVKmBwE8wiowivW9qH62AVk8&callback=initMap" async defer></script>
</body>
</html>
非常感谢!奇迹般有效! – Nattpappa
如果我的回答对你有帮助,你也可以接受我的回答,以便它可以帮助我和其他人:) –