如何在Google地图中仅显示州名？

Question

我已经根据我的需要自定义了Google地图，现在我必须在我的地图中显示州名，而这无法实现。

var locations = [];

// console.log(data[0]);
for(var i= 0; i< data.length; i++) {
    console.log(data[i].camp_location);
    locations.push([data[i].camp_location,data[i].lat,data[i].lng]);
}
var map = new google.maps.Map(document.getElementById('map1'), {
    zoom: 5, // The initial zoom level when your map loads (0-20)
    minZoom: 3, // Minimum zoom level allowed (0-20)
    maxZoom: 17, // Maximum soom level allowed (0-20)
    zoomControl:true, // Set to true if using zoomControlOptions below, or false to remove all zoom controls.
    zoomControlOptions: {
        style:google.maps.ZoomControlStyle.DEFAULT // Change to SMALL to force just the + and - buttons.
    },
    styles: [{"featureType": "water","elementType": "geometry","stylers": [{"color": "#2599F3"} ]},
            {"featureType": "landscape","elementType": "geometry","stylers": [{"color": "#429af7"} ]},
            {"featureType": "road","elementType": "geometry","stylers": [{"color": "#29768a",},{"visibility":"off"},{"lightness": -37}]}, 
            {"featureType": "poi","elementType": "geometry","stylers": [{"color": "#406d80"},{"visibility":"off"},]}, 
            {"featureType": "transit","elementType": "geometry","stylers": [{"color": "#406d80"},{"visibility": "off"},]}, 
            {"elementType": "labels.text.stroke","stylers": [{"visibility": "off"},{"color": "#3e606f"}, { "weight": 2},{"gamma": 0.84} ]},
            {"elementType": "labels.text.fill","stylers": [{"color": "#ffffff"},{"visibility":"off"},]},
            {elementType: 'labels.text.fill', stylers: [{color: '#746855'},{"visibility":"off"}]},
            {"featureType": "administrative","elementType": "geometry","stylers": [ {"weight": 0.6}, { "color": "#1a3541"},]},
            {"elementType": "labels.icon","stylers": [ {"visibility": "off" } ] }, 
            {"featureType": "poi.park","elementType": "geometry","stylers": [{"color": "#2c5a71"}]}],
    center: new google.maps.LatLng(40.12165,  -101.862376), // Centre the Map to our coordinates variable
    mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map
    scrollwheel: false, // Disable Mouse Scroll zooming (Essential for responsive sites!)

    // All of the below are set to true by default, so simply remove if set to true:
    panControl:false, // Set to false to disable
    mapTypeControl:false, // Disable Map/Satellite switch
    scaleControl:false, // Set to false to hide scale
    streetViewControl:false, // Set to disable to hide street view
    overviewMapControl:false, // Set to false to remove overview control
    rotateControl:false // Set to false to disable rotate control,
});

// var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {
    var infowindow = new google.maps.InfoWindow({ // Create a new InfoWindow
        content:locations[i][0] // HTML contents of the InfoWindow
    });
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: urlpath+'assets/image/location-pin.png',
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
        }
    })(marker, i));
}

下面是地图链接，我正在其中显示位置，现在我需要在地图中显示州名称。请帮忙。

Answer 1

根据documentation，状态（“省”）名称可以设置为featureType: "administrative.province"

将此添加到样式中以将状态名称设置为黑色文本：

{
  "featureType": "administrative.province",
  "elementType": "labels.text.stroke",
  "stylers": [{
    "visibility": "on"
  }, {
    "color": "#000000"
  }, {
    "weight": 1
  }]
}, {
  "featureType": "administrative.province",
  "elementType": "labels.text.fill",
  "stylers": [{
    "color": "#000000"
  }, {
    "visibility": "on"
  }, ]
}, {
  featureType: "administrative.province",
  elementType: 'labels.text.fill',
  stylers: [{
    color: '#000000'
  }, {
    "visibility": "on"
  }]
}

proof of concept fiddle

代码段：

var map;
var data = [];

function initMap() {
  var locations = [];
  // console.log(data[0]);
  for (var i = 0; i < data.length; i++) {
    console.log(data[i].camp_location);
    locations.push([data[i].camp_location, data[i].lat, data[i].lng]);
  }
  var map = new google.maps.Map(document.getElementById('map1'), {
    zoom: 5, // The initial zoom level when your map loads (0-20)
    minZoom: 3, // Minimum zoom level allowed (0-20)
    maxZoom: 17, // Maximum soom level allowed (0-20)
    zoomControl: true, // Set to true if using zoomControlOptions below, or false to remove all zoom controls.
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.DEFAULT // Change to SMALL to force just the + and - buttons.
    },
    styles: styles,
    center: new google.maps.LatLng(40.12165, -101.862376), // Centre the Map to our coordinates variable
    mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map
    scrollwheel: false, // Disable Mouse Scroll zooming (Essential for responsive sites!)
    // All of the below are set to true by default, so simply remove if set to true:
    panControl: false, // Set to false to disable
    mapTypeControl: false, // Disable Map/Satellite switch
    scaleControl: false, // Set to false to hide scale
    streetViewControl: false, // Set to disable to hide street view
    overviewMapControl: false, // Set to false to remove overview control
    rotateControl: false // Set to false to disable rotate control,
  });

  // var infowindow = new google.maps.InfoWindow();

  var marker, i;

  for (i = 0; i < locations.length; i++) {
    var infowindow = new google.maps.InfoWindow({ // Create a new InfoWindow
      content: locations[i][0] // HTML contents of the InfoWindow
    });
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      icon: urlpath + 'assets/image/location-pin.png',

    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
  }
}
var styles = [{
  "featureType": "water",
  "elementType": "geometry",
  "stylers": [{
    "color": "#2599F3"
  }]
}, {
  "featureType": "landscape",
  "elementType": "geometry",
  "stylers": [{
    "color": "#429af7"
  }]
}, {
  "featureType": "road",
  "elementType": "geometry",
  "stylers": [{
    "color": "#29768a",
  }, {
    "visibility": "off"
  }, {
    "lightness": -37
  }]
}, {
  "featureType": "poi",
  "elementType": "geometry",
  "stylers": [{
    "color": "#406d80"
  }, {
    "visibility": "off"
  }, ]
}, {
  "featureType": "transit",
  "elementType": "geometry",
  "stylers": [{
    "color": "#406d80"
  }, {
    "visibility": "off"
  }, ]
}, {
  "elementType": "labels.text.stroke",
  "stylers": [{
    "visibility": "off"
  }, {
    "color": "#3e606f"
  }, {
    "weight": 2
  }, {
    "gamma": 0.84
  }]
}, {
  "elementType": "labels.text.fill",
  "stylers": [{
    "color": "#ffffff"
  }, {
    "visibility": "off"
  }, ]
}, {
  elementType: 'labels.text.fill',
  stylers: [{
    color: '#746855'
  }, {
    "visibility": "off"
  }]
}, {
  "featureType": "administrative",
  "elementType": "geometry",
  "stylers": [{
    "weight": 0.6
  }, {
    "color": "#1a3541"
  }, ]
}, {
  "elementType": "labels.icon",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "poi.park",
  "elementType": "geometry",
  "stylers": [{
    "color": "#2c5a71"
  }]
}, {
  "featureType": "administrative.province",
  "elementType": "labels.text.stroke",
  "stylers": [{
    "visibility": "on"
  }, {
    "color": "#000000"
  }, {
    "weight": 1
  }]
}, {
  "featureType": "administrative.province",
  "elementType": "labels.text.fill",
  "stylers": [{
    "color": "#000000"
  }, {
    "visibility": "on"
  }, ]
}, {
  featureType: "administrative.province",
  elementType: 'labels.text.fill',
  stylers: [{
    color: '#000000'
  }, {
    "visibility": "on"
  }]
}];

html,
body,
#map1 {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map1"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>