Javascript 为google地图样式加载外部JSON文件会中断后续的地图操作
我学习了如何安全地为GoogleMaps加载外部JSON样式文件，并通过使用回调函数避免竞争条件。然而，添加该代码似乎破坏了在添加该代码之前在映射上使用的所有后续操作 下面是一个演示该问题的代码片段（注释掉javascript的第6-39行，取消注释第41-49行演示了除样式之外的所有其他功能） 添加基于回调的JSON映射样式是如何破坏所有后续操作的Javascript 为google地图样式加载外部JSON文件会中断后续的地图操作,javascript,google-maps-api-3,geoxml3,Javascript,Google Maps Api 3,Geoxml3,我学习了如何安全地为GoogleMaps加载外部JSON样式文件，并通过使用回调函数避免竞争条件。然而，添加该代码似乎破坏了在添加该代码之前在映射上使用的所有后续操作 下面是一个演示该问题的代码片段（注释掉javascript的第6-39行，取消注释第41-49行演示了除样式之外的所有其他功能） 添加基于回调的JSON映射样式是如何破坏所有后续操作的 var映射； var-myParser； var-markerClusterer； 函数initMap（）{ 函数loadJSON（回调）{ v
var映射；
var-myParser；
var-markerClusterer；
函数initMap（）{
函数loadJSON（回调）{
var xobj=新的XMLHttpRequest（）；
重写emimetype（“application/json”）；
xobj.open（'GET'，'https://api.myjson.com/bins/uvef2",对),；
常数readyOK=4；
常数响应k=200；
xobj.onreadystatechange=函数（）{
if（xobj.readyState==readyOK&&xobj.status===responseOK）{
回调（xobj.responseText）；
}
};
xobj.send（空）；
}
var-loaded_-json；
loadJSON（函数（响应）{
加载的_json=json.parse（响应）；
//log（“加载的json”）；
//log（加载的_json）；
var styledMapType=new google.maps.styledMapType（加载的{
名称：“地图”
});
map=new google.maps.map（document.getElementById（'map'）{
手势处理：'贪婪'，
中心：{lat:45.41，lng:-75.7}，
缩放：14，
mapTypeControlOptions：{
MapTypeId:['roadmap'，'satellite'，'hybrid'，'terrain'，'styled_map']
}
});
//控制台日志（“加载的映射”）；
map.mapTypes.set（'styled_map'，styledMapType）；
setMapTypeId（'styled_map'）；
log（“样式化映射集”）；
});
/*map=new google.maps.map（document.getElementById（'map'）{
手势处理：'贪婪'，
中心：{lat:45.41，lng:-75.7}，
缩放：14，
mapTypeControlOptions：{
MapTypeId:['roadmap'，'satellite'，'hybrid'，'terrain'，'styled_map']
}
});
*/
markerClusterer=新的markerClusterer（map，[]，{}）；
myParser=新的geoXML3.parser({
地图：地图，
zoom:错，
标记选项：{
图标：{
url:“http://maps.google.com/mapfiles/ms/icons/yellow-dot.png“，//url
scaledSize:new google.maps.Size（32,32）//缩放大小
}
},
createMarker：函数（placemark）{
var marker=myParser.createMarker（placemark）；
markerClusterer.addMarker（标记器）；
返回标记；
},
afterParse:useData
});
parseKmlString（file2kml）；
函数useData（文档）{
console.log（“已解析”+文档[0].placemarks.length+“placemarks”）；
}
}
google.maps.event.addDomListener（窗口'load'，initMap）；
var file2kml=`
测试地点标记
ff3644db
1.
http://maps.google.com/mapfiles/ms/icons/red-dot.png
阿森松堂
经度：-75.681623]>
#icon-1899-DB4436-labelson
45.410755
-75.681623
-75.681623,45.410755,0
银行街龙
经度：-75.699788]]>
#icon-1899-DB4436-labelson
45.420032
-75.699788
-75.699788,45.420032,0
加拿大贝尔广场酒店
经度：-75.692603]>
#icon-1899-DB4436-labelson
45.420214
-75.692603
-75.692603,45.420214,0
加拿大皇家军团自治领司令部
经度：-75.899762]>
#icon-1899-DB4436-labelson
45.310682
-75.899762
-75.899762,45.310682,0
约翰·比中校
经度：-75.692515]>
#icon-1899-DB4436-labelson
45.422076
-75.692515
-75.692515,45.422076,0
奥斯卡·彼得森，街头音乐家
经度：-75.693955]]>
#icon-1899-DB4436-labelson
45.42268
-75.693955
-75.693955,45.42268,0
萨默塞特广场
经度：-75.722117]>
#icon-1899-DB4436-labelson
45.406222
-75.722117
-75.722117,45.406222,0
温莎公园防洪
经度：-75.677548]>
#icon-1899-DB4436-labelson
45.39149
-75.677548
-75.677548,45.39149,0
弗兰克·克莱尔雕像
经度：-75.683657]>
#icon-1899-DB4436-labelson
45.397413
-75.683657
-75.683657,45.397413,0
渥太华密尔圣布雷布酒店
经度：-75.71263]]>
#icon-1899-DB4436-labelson
45.419537
-75.71263
-75.71263,45.419537,0
大卫·佩里纪念长椅
经度：-75.6743]>
#icon-1899-DB4436-labelson
45.397002
-75.6743
-75.6743,45.397002,0
十字架的同伴
经度：-75.70911]>
#icon-1899-DB4436-labelson
45.412132
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Info windows</title>
<style>
html,
body {
height: 100%;
;
width: 100%;
padding: 0px;
margin: 0px;
}
#map {
height: 90%;
width: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<script>
var map;
var myParser;
var markerClusterer;
function initMap() {
function loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', 'https://api.myjson.com/bins/uvef2', true);
const readyOK = 4;
const responseOK = 200;
xobj.onreadystatechange = function() {
if (xobj.readyState === readyOK && xobj.status === responseOK) {
callback(xobj.responseText);
}
};
xobj.send(null);
}
var loaded_json;
loadJSON(function(response) {
loaded_json = JSON.parse(response);
// console.log("loaded json");
// console.log(loaded_json);
var styledMapType = new google.maps.StyledMapType(loaded_json, {
name: 'Map'
});
map = new google.maps.Map(document.getElementById('map'), {
gestureHandling: 'greedy',
center: {lat: 45.41, lng: -75.7},
zoom: 14,
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain', 'styled_map']
}
});
// console.log("loaded map");
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
console.log("styled_map set");
markerClusterer = new MarkerClusterer(map, [], {});
myParser = new geoXML3.parser({
map: map,
zoom: false,
markerOptions: {
icon: {
url: "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png", // url
scaledSize: new google.maps.Size(32, 32) // scaled size
}
},
createMarker: function(placemark) {
var marker = myParser.createMarker(placemark);
markerClusterer.addMarker(marker);
return marker;
},
afterParse: useData
});
myParser.parseKmlString(file2kml);
});
function useData(docs) {
console.log("parsed " + docs[0].placemarks.length + " placemarks");
}
}
google.maps.event.addDomListener(window, 'load', initMap);
var file2kml = `<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name>test placemarks</name>
<Style id="icon-1899-DB4436-labelson">
<IconStyle>
<color>ff3644db</color>
<scale>1</scale>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/red-dot.png</href>
</Icon>
<hotSpot x="32" xunits="pixels" y="64" yunits="insetPixels"/>
</IconStyle>
</Style>
<Placemark>
<name>Church Of Ascension</name>
<description><![CDATA[latitude: 45.410755<br>longitude: -75.681623]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.410755</value>
</Data>
<Data name="longitude">
<value>-75.681623</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.681623,45.410755,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Bank Street Dragon</name>
<description><![CDATA[latitude: 45.420032<br>longitude: -75.699788]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.420032</value>
</Data>
<Data name="longitude">
<value>-75.699788</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.699788,45.420032,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Place Bell Canada</name>
<description><![CDATA[latitude: 45.420214<br>longitude: -75.692603]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.420214</value>
</Data>
<Data name="longitude">
<value>-75.692603</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.692603,45.420214,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>The Royal Canadian Legion Dominion Command</name>
<description><![CDATA[latitude: 45.310682<br>longitude: -75.899762]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.310682</value>
</Data>
<Data name="longitude">
<value>-75.899762</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.899762,45.310682,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Lieutenant Colonel John By</name>
<description><![CDATA[latitude: 45.422076<br>longitude: -75.692515]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.422076</value>
</Data>
<Data name="longitude">
<value>-75.692515</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.692515,45.422076,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Oscar Peterson, the Street Musician</name>
<description><![CDATA[latitude: 45.42268<br>longitude: -75.693955]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.42268</value>
</Data>
<Data name="longitude">
<value>-75.693955</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.693955,45.42268,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Somerset Square</name>
<description><![CDATA[latitude: 45.406222<br>longitude: -75.722117]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.406222</value>
</Data>
<Data name="longitude">
<value>-75.722117</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.722117,45.406222,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Windsor Park Flood Control</name>
<description><![CDATA[latitude: 45.39149<br>longitude: -75.677548]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.39149</value>
</Data>
<Data name="longitude">
<value>-75.677548</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.677548,45.39149,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Frank Clair Statue</name>
<description><![CDATA[latitude: 45.397413<br>longitude: -75.683657]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.397413</value>
</Data>
<Data name="longitude">
<value>-75.683657</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.683657,45.397413,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Ottawa Mill St. Brewpub</name>
<description><![CDATA[latitude: 45.419537<br>longitude: -75.71263]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.419537</value>
</Data>
<Data name="longitude">
<value>-75.71263</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.71263,45.419537,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>David Perry Memorial Bench</name>
<description><![CDATA[latitude: 45.397002<br>longitude: -75.6743]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.397002</value>
</Data>
<Data name="longitude">
<value>-75.6743</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.6743,45.397002,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Companions of the Cross</name>
<description><![CDATA[latitude: 45.412132<br>longitude: -75.70911]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.412132</value>
</Data>
<Data name="longitude">
<value>-75.70911</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.70911,45.412132,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>The Sunburst Building</name>
<description><![CDATA[latitude: 45.419296<br>longitude: -75.699572]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.419296</value>
</Data>
<Data name="longitude">
<value>-75.699572</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.699572,45.419296,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Rideau Curling Club</name>
<description><![CDATA[latitude: 45.413011<br>longitude: -75.704687]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.413011</value>
</Data>
<Data name="longitude">
<value>-75.704687</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.704687,45.413011,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Carling Otrain Station </name>
<description><![CDATA[latitude: 45.397474<br>longitude: -75.709528]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.397474</value>
</Data>
<Data name="longitude">
<value>-75.709528</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.709528,45.397474,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Geese Artwork</name>
<description><![CDATA[latitude: 45.417308<br>longitude: -75.700673]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.417308</value>
</Data>
<Data name="longitude">
<value>-75.700673</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.700673,45.417308,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name><![CDATA[Saint Patrick\'s Basilica]]></name>
<description><![CDATA[latitude: 45.41667<br>longitude: -75.70057]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.41667</value>
</Data>
<Data name="longitude">
<value>-75.70057</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.70057,45.41667,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Headless Elephants</name>
<description><![CDATA[latitude: 45.409045<br>longitude: -75.688275]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.409045</value>
</Data>
<Data name="longitude">
<value>-75.688275</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.688275,45.409045,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Valour Bridge</name>
<description><![CDATA[latitude: 45.310651<br>longitude: -75.901318]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.310651</value>
</Data>
<Data name="longitude">
<value>-75.901318</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.901318,45.310651,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Marble Soccer Balls</name>
<description><![CDATA[latitude: 45.404574<br>longitude: -75.711718]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.404574</value>
</Data>
<Data name="longitude">
<value>-75.711718</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.711718,45.404574,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Shrine To Mary.</name>
<description><![CDATA[latitude: 45.414046<br>longitude: -75.708891]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.414046</value>
</Data>
<Data name="longitude">
<value>-75.708891</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.708891,45.414046,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Guigues Hall Saint Paul University</name>
<description><![CDATA[latitude: 45.408308<br>longitude: -75.676281]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.408308</value>
</Data>
<Data name="longitude">
<value>-75.676281</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.676281,45.408308,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Ottawa Chinese Bible Church</name>
<description><![CDATA[latitude: 45.41234<br>longitude: -75.680081]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.41234</value>
</Data>
<Data name="longitude">
<value>-75.680081</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.680081,45.41234,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Canadian Bank Note Company</name>
<description><![CDATA[latitude: 45.395734<br>longitude: -75.745783]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.395734</value>
</Data>
<Data name="longitude">
<value>-75.745783</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.745783,45.395734,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Dominion Arboretum</name>
<description><![CDATA[latitude: 45.391174<br>longitude: -75.704042]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.391174</value>
</Data>
<Data name="longitude">
<value>-75.704042</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.704042,45.391174,0
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>BiTe This</name>
<description><![CDATA[latitude: 45.395077<br>longitude: -75.747579]]></description>
<styleUrl>#icon-1899-DB4436-labelson</styleUrl>
<ExtendedData>
<Data name="latitude">
<value>45.395077</value>
</Data>
<Data name="longitude">
<value>-75.747579</value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-75.747579,45.395077,0
</coordinates>
</Point>
</Placemark>
</Document>
</kml>
`;
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>