Question

我对编码很陌生，之前我还没有真正使用它，并且负责创建一个自定义地图，我也可以在其上显示许多标记。我成功地制作了一个显示标记的地图和另一个带有自定义样式的地图。但是，我无法弄清楚如何将这两者结合起来。

目前我有这个，它显示样式化的地图，但不显示标记，我完全不知道如何从这里继续前进。

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

任何建议都会非常感激，因为我对此非常陌生。

Answer 1

您的图层实例应位于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

以下是示例应用的代码，您还可以通过运行代码段来查看和检查示例：

＆＃13;

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

＆＃13;

#map {
  height: 500px;
  width: 500px;
}

＆＃13;

<!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>

＆＃13;

Google Maps API - 将融合表图层添加到样式化地图图层

1 个答案: