2017-08-02 14 views
8

を作成し、私は地図上の自分のスタイラーを作成したいです。例えば、どのように私はそれを行うことができ、私は国の限界にいくつかの花(または他の何かを)置きたいと仮定?だから、GoogleマップのAPIを使用して3スタイラーとJS

私はGoogleマップのスタイラーを使用しますが、制限があります:私たちは、Googleが提供しているさまざまなスタイラー(不透明度、色を...)を使用することがあります。自分のスタイラーを作るにはどうすればいいですか?スタイラーのような

マイマップ使用スタイラーは、Googleの開発者にhereを見つけることができます。 ドキュメントは私の問題を説明していないと私は成功せず、スタックオーバーフローなどのオーデルのウェブサイトでいくつかの方法を探してみてください。

私は例を単純化するために、例ではドキュメントのマップを使用します。したがって、これは私のコードです:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Styled Map Types</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     /* Always set the map height explicitly to define the size of the div 
     * element that contains the map. */ 
     #map { 
     height: 100%; 
     } 
     /* Optional: Makes the sample page fill the window. */ 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script> 
     function initMap() { 

     // Create a new StyledMapType object, passing it an array of styles, 
     // and the name to be displayed on the map type control. 
     var styledMapType = new google.maps.StyledMapType(
      [ 
       {elementType: 'geometry', stylers: [{color: '#ebe3cd'}]}, 
       {elementType: 'labels.text.fill', stylers: [{color: '#523735'}]}, 
       {elementType: 'labels.text.stroke', stylers: [{color: '#f5f1e6'}]}, 
       { 
       featureType: 'administrative', 
       elementType: 'geometry.stroke', 
       stylers: [{color: '#c9b2a6'}] 
       }, 
       { 
       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: '#dfd2ae'}] 
       }, 
       { 
       featureType: 'poi', 
       elementType: 'geometry', 
       stylers: [{color: '#dfd2ae'}] 
       }, 
       { 
       featureType: 'poi', 
       elementType: 'labels.text.fill', 
       stylers: [{color: '#93817c'}] 
       }, 
       { 
       featureType: 'poi.park', 
       elementType: 'geometry.fill', 
       stylers: [{color: '#a5b076'}] 
       }, 
       { 
       featureType: 'poi.park', 
       elementType: 'labels.text.fill', 
       stylers: [{color: '#447530'}] 
       }, 
       { 
       featureType: 'road', 
       elementType: 'geometry', 
       stylers: [{color: '#f5f1e6'}] 
       }, 
       { 
       featureType: 'road.arterial', 
       elementType: 'geometry', 
       stylers: [{color: '#fdfcf8'}] 
       }, 
       { 
       featureType: 'road.highway', 
       elementType: 'geometry', 
       stylers: [{color: '#f8c967'}] 
       }, 
       { 
       featureType: 'road.highway', 
       elementType: 'geometry.stroke', 
       stylers: [{color: '#e9bc62'}] 
       }, 
       { 
       featureType: 'road.highway.controlled_access', 
       elementType: 'geometry', 
       stylers: [{color: '#e98d58'}] 
       }, 
       { 
       featureType: 'road.highway.controlled_access', 
       elementType: 'geometry.stroke', 
       stylers: [{color: '#db8555'}] 
       }, 
       { 
       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: '#dfd2ae'}] 
       }, 
       { 
       featureType: 'water', 
       elementType: 'geometry.fill', 
       stylers: [{color: '#b9d3c2'}] 
       }, 
       { 
       featureType: 'water', 
       elementType: 'labels.text.fill', 
       stylers: [{color: '#92998d'}] 
       } 
      ], 
      {name: 'Styled Map'}); 

     // Create a map object, and include the MapTypeId to add 
     // to the map type control. 
     var map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: 55.647, lng: 37.581}, 
      zoom: 11, 
      mapTypeControlOptions: { 
      mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain', 
        'styled_map'] 
      } 
     }); 

     //Associate the styled map with the MapTypeId and set it to display. 
     map.mapTypes.set('styled_map', styledMapType); 
     map.setMapTypeId('styled_map'); 
     } 
    </script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 
    </script> 
    </body> 
</html> 
+0

ドキュメントによれば、色(彩度、明度などの定義はあなたが言ったように)しか変更できません。いくつかの画像(国境に花など)を配置する場合は、独自のオーバーレイ画像を作成する必要があります(透過画像(または複数)には国境としての花が含まれています):https://developers.google.com/maps/documentation/ javascript/examples/groundoverlay-simple – alalp

答えて

1

は、あなたがGoogleのカスタムマーカーを使用して/読んでやりました?。 visit google custom markerでない場合、これはあなたの質問に答えるかもしれません。

+0

私は多くのドキュメントを読んでいます!私の質問は、いくつかのスタイルスタイラーを作成する方法であり、ドキュメンテーションはこれについて扱っていません。あなたは私の質問をよく理解していません。ごめんなさい。 –

関連する問題