Javascript 使用谷歌地图，如何用某种颜色填充所有国家/地区？
在我的谷歌地图中，我只想显示 整个地图的背景色 颜色由我选择 国家区域充满了我选择的颜色 国家名称标签 省名标签 地方城市名称标签 除了3个，我已经把它们都弄明白了： {featureType:'all'，elementType:'geometry'，样式器：[{color:'242f3e'}]} {featureType:'administrative.country'，elementType:'geometry.stroke'，样式器：[{color:'242f3e'}]} ？？？？？？？我如何做到这一点 {feature.type:'administrative.country'，elementType:'labels.text.fill'，样式器：[{color:'746855'}]} {feature.type:'administrative.province'，elementType:'labels.text.fill'，样式器：[{color:'746855'}]} {feature.type:'administrative.locality'，elementType:'labels.text.fill'，样式器：[{color:'746855'}]} 但是我很难获得第三名。这就是问题所在 如果您能在给定的JSFiddle中测试您给出的解决方案，那就太好了，因为有时候人们给出的建议根本不起作用Javascript 使用谷歌地图，如何用某种颜色填充所有国家/地区？,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,在我的谷歌地图中，我只想显示 整个地图的背景色 颜色由我选择 国家区域充满了我选择的颜色 国家名称标签 省名标签 地方城市名称标签 除了3个，我已经把它们都弄明白了： {featureType:'all'，elementType:'geometry'，样式器：[{color:'242f3e'}]} {featureType:'administrative.country'，elementType:'geometry.stroke'，样式器：[{color:'242f3e'}]} ？？？？？？？我
您需要加载包含所有国家/地区的GeoJSON并附加样式 您可以访问此站点，选择所有世界地区，例如选择中等分辨率，并构建包含所有世界国家的自定义GeoJson 您可以根据需要重命名它。我将其重命名为countries.geo.json
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* 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;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 34.397, lng: 150.644},
zoom: 2
});
// here import the GeoJson holding all the countries
map.data.loadGeoJson('countries.geo.json');
// here attach a style - I gave red fill and white stroke
map.data.setStyle(function(feature) {
return /** @type {google.maps.Data.StyleOptions} */({
fillColor: 'red',
strokeColor: 'white',
strokeWeight: 2
});
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY&callback=initMap"
async defer></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* 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;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 34.397, lng: 150.644},
zoom: 2
});
// here import the GeoJson holding all the countries
map.data.loadGeoJson('countries.geo.json');
// here attach a style - I gave red fill and white stroke
map.data.setStyle(function(feature) {
return /** @type {google.maps.Data.StyleOptions} */({
fillColor: 'red',
strokeColor: 'white',
strokeWeight: 2
});
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY&callback=initMap"
async defer></script>
</body>
</html>
最后但并非最不重要的一点是，我想提及API密钥不是我的。我从developers.google.com借用了它您需要加载一个包含所有国家/地区的GeoJSON并附加一个样式 您可以访问此站点，选择所有世界地区，例如选择中等分辨率，并构建包含所有世界国家的自定义GeoJson 您可以根据需要重命名它。我将其重命名为countries.geo.json
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* 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;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 34.397, lng: 150.644},
zoom: 2
});
// here import the GeoJson holding all the countries
map.data.loadGeoJson('countries.geo.json');
// here attach a style - I gave red fill and white stroke
map.data.setStyle(function(feature) {
return /** @type {google.maps.Data.StyleOptions} */({
fillColor: 'red',
strokeColor: 'white',
strokeWeight: 2
});
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY&callback=initMap"
async defer></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* 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;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 34.397, lng: 150.644},
zoom: 2
});
// here import the GeoJson holding all the countries
map.data.loadGeoJson('countries.geo.json');
// here attach a style - I gave red fill and white stroke
map.data.setStyle(function(feature) {
return /** @type {google.maps.Data.StyleOptions} */({
fillColor: 'red',
strokeColor: 'white',
strokeWeight: 2
});
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY&callback=initMap"
async defer></script>
</body>
</html>
最后但并非最不重要的一点是，我想提及API密钥不是我的。我是从developers.google.com借用的。你查过我的答案了吗。它解决了你的问题吗？我要投票表决，但现在不能尝试，因为我必须学习GeoJSON，看看它是否能帮助我。但是我会的，然后我会把它标记为acceptedHi。你查过我的答案了吗。它解决了你的问题吗？我要投票表决，但现在不能尝试，因为我必须学习GeoJSON，看看它是否能帮助我。但我会的，然后我会把它标记为已接受