谷歌地圖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 - 將融合表層到風格圖層

回答

相關問題