2017-07-28 171 views
0

我有用我自己的圖標創建的fowlling谷歌地圖。該代碼是fowlling:風格谷歌地圖

https://paste.ee/p/O3U44

不過,我想加時賽加銀的風格,但我不知道如何修改這個代碼。

任何幫助將apprecaited。

謝謝!

+1

你想在RHP圖像中添加銀色風格的地方? –

+0

嗨。感謝您的回覆。我想在地圖本身添加樣式 - 我已經添加了成本管腳,因爲你看到它。我只需要添加銀色風格。 – lordpicard

+1

此鏈接將對您有用https://developers.google.com/maps/documentation/android-api/styling和https://mapstyle.withgoogle.com/。 –

回答

0

請按照此代碼。

在這裏你需要在下面的鏈接添加你的谷歌API密鑰。

src="https://maps.googleapis.com/maps/api/jskey=Your_api_key&callback=initMap" 

這是代碼。

var map; 
 
     function initMap() { 
 
     map = new google.maps.Map(document.getElementById('map'), { 
 
      zoom: 16, 
 
      center: new google.maps.LatLng(38.769671, -9.097975), 
 
      mapTypeId: 'roadmap', 
 
      styles : [ 
 
    { 
 
    "elementType": "geometry", 
 
    "stylers": [ 
 
     { 
 
     "color": "#f5f5f5" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "elementType": "labels.icon", 
 
    "stylers": [ 
 
     { 
 
     "visibility": "off" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "elementType": "labels.text.fill", 
 
    "stylers": [ 
 
     { 
 
     "color": "#616161" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "elementType": "labels.text.stroke", 
 
    "stylers": [ 
 
     { 
 
     "color": "#f5f5f5" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "administrative.land_parcel", 
 
    "elementType": "labels.text.fill", 
 
    "stylers": [ 
 
     { 
 
     "color": "#bdbdbd" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "poi", 
 
    "elementType": "geometry", 
 
    "stylers": [ 
 
     { 
 
     "color": "#eeeeee" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "poi", 
 
    "elementType": "labels.text.fill", 
 
    "stylers": [ 
 
     { 
 
     "color": "#757575" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "poi.park", 
 
    "elementType": "geometry", 
 
    "stylers": [ 
 
     { 
 
     "color": "#e5e5e5" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "poi.park", 
 
    "elementType": "labels.text.fill", 
 
    "stylers": [ 
 
     { 
 
     "color": "#9e9e9e" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "road", 
 
    "elementType": "geometry", 
 
    "stylers": [ 
 
     { 
 
     "color": "#ffffff" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "road.arterial", 
 
    "elementType": "labels.text.fill", 
 
    "stylers": [ 
 
     { 
 
     "color": "#757575" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "road.highway", 
 
    "elementType": "geometry", 
 
    "stylers": [ 
 
     { 
 
     "color": "#dadada" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "road.highway", 
 
    "elementType": "labels.text.fill", 
 
    "stylers": [ 
 
     { 
 
     "color": "#616161" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "road.local", 
 
    "elementType": "labels.text.fill", 
 
    "stylers": [ 
 
     { 
 
     "color": "#9e9e9e" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "transit.line", 
 
    "elementType": "geometry", 
 
    "stylers": [ 
 
     { 
 
     "color": "#e5e5e5" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "transit.station", 
 
    "elementType": "geometry", 
 
    "stylers": [ 
 
     { 
 
     "color": "#eeeeee" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "water", 
 
    "elementType": "geometry", 
 
    "stylers": [ 
 
     { 
 
     "color": "#c9c9c9" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "featureType": "water", 
 
    "elementType": "labels.text.fill", 
 
    "stylers": [ 
 
     { 
 
     "color": "#9e9e9e" 
 
     } 
 
    ] 
 
    } 
 
] 
 
     }); 
 
     
 
    
 
     var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; 
 
     var icons = { 
 
      info: { 
 
      icon: 'https://novo2.rhp.pt/map.png' 
 
      } 
 
     }; 
 
    
 
     var features = [ 
 
      { 
 
      position: new google.maps.LatLng(38.769671, -9.097975), 
 
      type: 'info' 
 
      } 
 
     ]; 
 
    
 
     // Create markers. 
 
     features.forEach(function(feature) { 
 
      var marker = new google.maps.Marker({ 
 
      position: feature.position, 
 
      icon: icons[feature.type].icon, 
 
      map: map, 
 
      content:'<div>Test</div>' 
 
      
 
      }); 
 
     }); 
 
     }
/* 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; 
 
     }
<div id="map"></div> 
 
<script async defer 
 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 
 
    </script>

如果你想改變還是那麼地圖樣式請點擊此鏈接https://mapstyle.withgoogle.com/,創造任何你想要的,只是複製整個JSON代碼及以上styles對象替換英寸

希望這會有所幫助。

+0

謝謝。有效! – lordpicard