加载外部JSON文件以用于Google Maps样式 [英] Load external JSON file for google maps styling
问题描述
我目前正在使用由本网站制作的JSON样式化Google地图.这里显示了我的代码示例(尽管实际上有数百行json样式):
I'm currently succesfully styling my google maps using the JSON as made by this site. An example of my code is shown here (though in reality there are many hundreds of lines of json styling):
window.onload = function initMap() {
var styledMapType = new google.maps.StyledMapType(
[
{
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
], {name: 'Map'});
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: 51.529517, lng: 10.058284},
mapTypeControlOptions: {
mapTypeIds: ['satellite', 'styled_map']
}
});
// Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
}
<html>
<head>
<script src="load_maps_works.js"></script>
<style>
#map{
position: absolute;
top: 100px;
left: 0;
bottom: 100px;
right: 0;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
很显然，这使我的javascript变得一团糟，所以我想将所有json样式保留在一个单独的.json文件中，该javascript会加载到该文件中.不幸的是，我对此不太满意.我尝试过:
Obviously this makes a big mess of my javascript, so I would like to keep all the json styling in a separate .json file, which the javascript loads in. Unfortunately I haven't had much luck with this. I've tried:
window.onload = function initMap() {
function loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', 'http://localhost:8000/style.json', true);
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
callback(xobj.responseText);
}
};
xobj.send(null);
}
var loaded_json
loadJSON(function(response) {
// This correctly prints out the JSON
loaded_json = JSON.parse(response);
console.log(loaded_json)
});
// This doesn't
console.log(loaded_json)
var styledMapType = new google.maps.StyledMapType(loaded_json, {name: 'Map'});
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: 51.529517, lng: 10.058284},
mapTypeControlOptions: {
mapTypeIds: ['satellite', 'styled_map']
}
});
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
}
<html>
<head>
<script src="load_maps_broken.js"></script>
<style>
#map{
position: absolute;
top: 100px;
left: 0;
bottom: 100px;
right: 0;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDO1KU-C6Iy7VhyIJMEPiHNtqhWLmYCl3w&libraries=places&sensor=false"></script>
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
style.json所在的位置:
[
{
"elementType": "geometry",
"stylers": [
{
"color": "#ebe3cd"
}
]
}
]
但这无法将样式应用于地图.
But this fails to apply the styling to the map.
那么我该如何应用外部json文件(托管在我的服务器上)作为Google地图的样式?真的和这一切一样复杂吗?
So how can I apply an external json file (hosted on my server) to be the styling for my google maps? Is it really as complex as all this?
推荐答案
在存在样式的地方将地图创建移动到loadJSON回调函数中.
Move the map creation into the loadJSON callback function when/where the styles exist.
代码段(请注意，由于JSON文件不可用，因此该代码段无法在SO上运行，实时示例
code snippet (note that the code snippet won't work on SO as the JSON file isn't available, the live example (external link above) works):
window.onload = function initMap() {
function loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', 'style.json', true);
xobj.onreadystatechange = function() {
if (xobj.readyState == 4 && xobj.status == "200") {
callback(xobj.responseText);
}
};
xobj.send(null);
}
var loaded_json
loadJSON(function(response) {
// This correctly prints out the JSON
loaded_json = JSON.parse(response);
console.log(loaded_json)
var styledMapType = new google.maps.StyledMapType(loaded_json, {
name: 'Map'
});
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {
lat: 51.529517,
lng: 10.058284
},
mapTypeControlOptions: {
mapTypeIds: ['satellite', 'styled_map']
}
});
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
// This doesn't
console.log(loaded_json)
});
}
#map {
position: absolute;
top: 100px;
left: 0;
bottom: 100px;
right: 0;
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDO1KU-C6Iy7VhyIJMEPiHNtqhWLmYCl3w&libraries=places"></script>
<div id="map"> </div>
这篇关于加载外部JSON文件以用于Google Maps样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
