2017-07-28 167 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