谷歌地图API - 将融合表层到风格图层

-1

我很新的编码，我还没有真正与它在所有工作过，并与创建自定义的地图上，我还可以显示受命一些标记。我已经成功地制作了一张显示标记和另一张具有自定义样式的地图的地图。但是，我无法弄清楚如何将这两者结合在一起。谷歌地图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' 
    } 
    });

任何建议将非常赞赏，因为我是非常非常新的这一点。

来源

2017-10-19 Nattpappa

您层实例应该是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>

来源

2017-10-19 08:20:09

非常感谢！奇迹般有效！ – Nattpappa

如果我的回答对你有帮助，你也可以接受我的回答，以便它可以帮助我和其他人:) –

谷歌地图API - 将融合表层到风格图层

回答

相关问题