2017-02-06 3 views
1

Я закончил стилизации карту, за исключением одной вещи ... я не могу изменить цвет текста на улицах, мне нужна помощь с этим, пожалуйста:Google Maps API, изменить цвет текста

window.onload=function initMap() { 
 
    var c=new google.maps.LatLng(21.6845066, 39.1180914); 
 
    var b= { 
 
     zoom: 16, center: c, mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true, styles: d, scrollwheel: false 
 
    } 
 
    ; 
 
    map=new google.maps.Map(document.getElementById("map"), b); 
 
    var a=new google.maps.Marker({ 
 
\t \t position: c, 
 
\t \t map: map, 
 
\t \t url: 'https://www.google.com.sa/maps/place/urbanphenomena/@21.568151,39.1630948,17z/data=!4m13!1m7!3m6!1s0x15c3d07221b828cf:0x1856c55812c88a1a!2surbanphenomena!3b1!8m2!3d21.5691139!4d39.1633416!3m4!1s0x15c3d07221b828cf:0x1856c55812c88a1a!8m2!3d21.5691139!4d39.1633416?hl=en&shorturl=1', 
 
\t \t title: "Click to open google maps", 
 
    } 
 
    ); 
 
\t 
 
    var d=[ 
 
    { 
 
     "featureType": "administrative", 
 
     "elementType": "labels", 
 
     "stylers": [ 
 
      { 
 
       "visibility": "simplified" 
 
      }, 
 
      { 
 
       "color": "#ff0000" 
 
      } 
 
     ] 
 
    }, 
 
    { 
 
     "featureType": "administrative", 
 
     "elementType": "labels.text.fill", 
 
     "stylers": [ 
 
      { 
 
       "color": "#444444" 
 
      } 
 
     ] 
 
    }, 
 
    { 
 
     "featureType": "administrative.country", 
 
     "elementType": "labels", 
 
     "stylers": [ 
 
      { 
 
       "color": "#fc0505" 
 
      }, 
 
      { 
 
       "visibility": "on" 
 
      } 
 
     ] 
 
    }, 
 
    { 
 
     "featureType": "administrative.province", 
 
     "elementType": "labels", 
 
     "stylers": [ 
 
      { 
 
       "color": "#ff0000" 
 
      }, 
 
      { 
 
       "visibility": "simplified" 
 
      } 
 
     ] 
 
    }, 
 
    { 
 
     "featureType": "administrative.locality", 
 
     "elementType": "labels", 
 
     "stylers": [ 
 
      { 
 
       "color": "#ff0000" 
 
      }, 
 
      { 
 
       "visibility": "simplified" 
 
      } 
 
     ] 
 
    }, 
 
    { 
 
     "featureType": "administrative.neighborhood", 
 
     "elementType": "labels", 
 
     "stylers": [ 
 
      { 
 
       "color": "#ff0000" 
 
      }, 
 
      { 
 
       "visibility": "simplified" 
 
      } 
 
     ] 
 
    }, 
 
    { 
 
     "featureType": "administrative.land_parcel", 
 
     "elementType": "labels", 
 
     "stylers": [ 
 
      { 
 
       "color": "#ff0000" 
 
      }, 
 
      { 
 
       "visibility": "simplified" 
 
      } 
 
     ] 
 
    }, 
 
    { 
 
     "featureType": "landscape", 
 
     "elementType": "all", 
 
     "stylers": [ 
 
      { 
 
       "color": "#f2f2f2" 
 
      } 
 
     ] 
 
    }, 
 
    { 
 
     "featureType": "poi", 
 
     "elementType": "all", 
 
     "stylers": [ 
 
      { 
 
       "visibility": "off" 
 
      } 
 
     ] 
 
    }, 
 
    { 
 
     "featureType": "road", 
 
     "elementType": "all", 
 
     "stylers": [ 
 
      { 
 
       "saturation": -100 
 
      }, 
 
      { 
 
       "lightness": 45 
 
      } 
 
     ] 
 
    }, 
 
    { 
 
     "featureType": "road.highway", 
 
     "elementType": "all", 
 
     "stylers": [ 
 
      { 
 
       "visibility": "simplified" 
 
      } 
 
     ] 
 
    }, 
 
    { 
 
     "featureType": "road.arterial", 
 
     "elementType": "labels.icon", 
 
     "stylers": [ 
 
      { 
 
       "visibility": "off" 
 
      } 
 
     ] 
 
    }, 
 
    { 
 
     "featureType": "transit", 
 
     "elementType": "all", 
 
     "stylers": [ 
 
      { 
 
       "visibility": "off" 
 
      } 
 
     ] 
 
    }, 
 
    { 
 
     "featureType": "water", 
 
     "elementType": "all", 
 
     "stylers": [ 
 
      { 
 
       "color": "#ffffff" 
 
      }, 
 
      { 
 
       "visibility": "on" 
 
      } 
 
     ] 
 
    } 
 
]; 
 
    map.setOptions({ 
 
     styles: d 
 
    } 
 
    ) 
 
} 
 

 
;
.map-container { 
 
    position: relative; 
 
    padding-bottom: 50%; 
 
    height: 0; 
 
    overflow: hidden; 
 
} 
 

 
.map-container #map { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 95%; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAxwQNKD9zuR0uKXq90sbVLWdwEXOzoBeQ&callback=initMap" 
 
    type="text/javascript"></script> 
 

 
<!--- Contact section ---> 
 
    <div class="container-fluid section contact-section" id="section5"> 
 
     <div class="row"> 
 
     <div class="col-lg-7 col-lg-push-2"> 
 
      <div class="map-container"> 
 
      <div id="map"></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-lg-2 text-right col-lg-push-7"> 
 
      <span>Tel: </span>+966122345362<br><br> 
 
      <span>Fax: </span>+966126949635<br><br> 
 
      <span>Email: </span> <a href="mailto:[email protected]">[email protected]</a> 
 
      <br><br> 
 
      <span>Website: </span> <a href="http://www.mhs-arch.com" target="_self">http://www.mhs-arch.com</a> 
 
     </div> 
 
     </div> 
 
    </div>

Это изменило цвет земли, воды, улицы и текста заголовка, а также название района. Как изменить название улицы?

Спасибо!

ответ

1

Так что это будет изменить цвет текста местных дорог (что вы после этого)

{ 
      "featureType": "administrative.locality", 
      "elementType": "labels.text.fill", 
      "stylers": [ 
       { 
        "color": "#97ff00" 
      } 
     ] 
    } 

Это немного нечетнога иерархии, и может быть конфликт в перезаписи стилей. Я рекомендую проверить snazzy map editor для получения дополнительной информации.

+0

Этот редактор, спасибо за это !!! Что даже круто, что из-за редактора я знаю, что такое featureType и ElementType и их категории –

2

Дорожные этикетки могут быть стилизовано, используя следующие свойства объекта:

{ 
    featureType: 'road', 
    elementType: 'labels.text.fill', 
    stylers: [{color: '#9ca5b3'}] 
} 

Google карты стиле с использованием массива объектов, каждый объект содержит свойства, стиль элемента на карте. Это хорошая ссылка для стилей карты Google: Start Styling your Map.

Еще один совет: вы также можете установить свойство elementType: 'labels.text.stroke', чтобы добавить схему вокруг вашего текста.

+0

Имеет смысл! Но .. как-то не работает/применяет стиль. –

Смежные вопросы