Javascript 为 Google MAPS API v3 加载 JSON 数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12133067/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load JSON data for Google MAPS API v3
提问by Nicolaesse
starting from the following example code (from https://google-developers.appspot.com/maps/documentation/javascript/overlays#SimpleIcons)
从以下示例代码开始（来自https://google-developers.appspot.com/maps/documentation/javascript/overlays#SimpleIcons）
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCHgCs40BzMLmN2-GpJ-liYfcYsas-VVsI&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 10,
maxZoom: 12,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
setMarkers(map, beaches);
}
/**
* Data for the markers consisting of a name, a LatLng and a zIndex for
* the order in which these markers should display on top of each
* other.
*/
var beaches = (function () {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': data.php,
'dataType': "json",
'success': function (data) {
json = data;
}
});
return json;
alert("OK, data loaded");
});
/*var beaches = [
['Stuttgart', 48.766700, 9.183330, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
*/
function setMarkers(map, locations) {
// Add markers to the map
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var image = new google.maps.MarkerImage('images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(20, 32),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
can I load the points from an external file? Using this solution load json into variableI made the following:
我可以从外部文件加载点吗？使用此解决方案将json 加载到变量中，我进行了以下操作：
var beaches = (function () {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': data.json,
'dataType': "json",
'success': function (data) {
json = data;
}
});
return json;
})();
but the file beaches list doesn't seem to be a well formatted JSON file! file data.json:
但是文件海滩列表似乎不是格式良好的 JSON 文件！文件 data.json：
beaches: [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
回答by jeff
There are a few issues with your current JSON:
您当前的 JSON 存在一些问题：
- You use single quotes rather than double quotes. In JSON, strings must be wrapped in double quotes.
- Your "beaches" property must also be wrapped in quotes.
- You must make the JSON an object by wrapping it in curly brackets (
{}).
- 您使用单引号而不是双引号。在 JSON 中，字符串必须用双引号括起来。
- 您的“海滩”属性也必须用引号括起来。
- 您必须通过将 JSON 包裹在大括号 (
{}) 中来使其成为对象。
Try the following JSON:
尝试以下 JSON：
{
"beaches": [
[
"BondiBeach",
-33.890542,
151.274856,
4
],
[
"CoogeeBeach",
-33.923036,
151.259052,
5
],
[
"CronullaBeach",
-34.028249,
151.157507,
3
],
[
"ManlyBeach",
-33.80010128657071,
151.28747820854187,
2
],
[
"MaroubraBeach",
-33.950198,
151.259302,
1
]
]
}
回答by Oliver Burdekin
Seems to be a popular activity in Australia. See the below:
似乎是澳大利亚的一项流行活动。请参阅以下内容：
