Question

我完成了地图样式，除了一件事...... 我无法改变街道＆＃39;文字颜色，我需要帮助：

＆＃13;

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( {
		position: c, 
		map: map, 
		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',
		title: "Click to open google maps", 
    }
    );
	
    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
    }
    )
}

;

＆＃13;

.map-container {
  position: relative;
  padding-bottom: 50%;
  height: 0;
  overflow: hidden;
}

.map-container #map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 95%;
}

＆＃13;

<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:info@mhs-arch.com">info@mhs-arch.com</a>
          <br><br>
          <span>Website: </span> <a href="http://www.mhs-arch.com" target="_self">http://www.mhs-arch.com</a>
        </div>
      </div>
    </div>

＆＃13;

它改变了土地，水，街道和标题文本的颜色以及邻居的名称。如何更改街道的名称？

谢谢！

Answer 1

道路标签可以使用以下对象属性设置样式：

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

Google地图使用对象数组进行样式设置，每个对象都包含在地图上为元素设置样式的属性。这是Google地图样式的一个很好的参考：Start Styling your Map。

另一个提示：您还可以设置属性 elementType：＆＃39; labels.text.stroke＆＃39; 以在文字周围添加大纲。

Answer 2

因此，这将编辑当地道路的文字颜色（这是你之后的）

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

它有点奇怪的层次结构，并且覆盖样式可能存在冲突。我建议您查看snazzy map editor以获取更多信息。

Google Maps API，更改文字颜色

2 个答案: