谷歌地图API第3版
问题描述：
从（从https://google-developers.appspot.com/maps/documentation/javascript/overlays#SimpleIcons）谷歌地图API第3版
<!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>
以下示例代码启动负载JSON数据可以我从外部文件加载点？ 使用该解决方案load json into variable我作了如下：
var beaches = (function() {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': data.json,
'dataType': "json",
'success': function (data) {
json = data;
}
});
return 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]
];
答
有几个问题与您当前的JSON：
- 您可以使用单引号，而不是双引号。在JSON中，字符串必须用双引号包装。
- 您的“海滩”属性也必须用引号括起来。
- 您必须通过将JSON包装在大括号中（
{}）来使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
]
]
}
+0
Thaks！ JSON文件现在是有效的，但是如果我使用它，则地图上不会显示任何标志。我认为数据不会从文件中加载，因为如果我写入“alert（”OK，data loaded“）;”在“返回json”之后加载页面时不显示警报消息。我编辑了包括HTML代码的第一篇文章。 – Nicolaesse
+1
如果您在**返回后编写“任何”**，它永远不会到达“任何”，因为它已经返回。 :-) – Marcelo
什么 “文件的海滩”？我没有看到您的问题中的格式链接。 – geocodezip
我刚更新了帖子 – Nicolaesse