你能帮我解决我得到的错误吗？
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="Google.js"></script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
zoom:13,
center: new google.maps.LatLng(42.697, 23.322),
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:800px; 600px;"></div>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON( 'data.json', function(data) {
$.each( data.pin, function(i, m) {
$('#map_canvas').gmap('addMarker', { 'position': new google.maps.LatLng(m.latitude, m.longitude), 'bounds':true } );
});
});
});
</script>
</body>
</html>
and here is the JSON file:
{
"pins": {
"pin": {
"name": "Sofia Bike Rental",
"latitude": "42.692821",
"longitude": "23.328738",
"contact": "www.sofiabikerental.com",
"type": "rent"
},
"pin": {
"name": "Sofia Rent Center",
"latitude": "42.6674952",
"longitude": "23.2857399",
"contact": "www.sofiarentcenter.com",
"type": "rent"
},
"pin": {
"name": "Drag Zone",
"latitude": "42.6700007",
"longitude": "23.2928839",
"contact": "www.velomania-bg.com",
"type": "service"
},
"pin": {
"name": "True Riders",
"latitude": "42.682068",
"longitude": "23.322313",
"contact": "www.trueriders.bg",
"type": "service"
},
"pin": {
"name": "NDK",
"latitude": "42.685882",
"longitude": "23.318138",
"type": "parking"
},
"pin": {
"name": "Sofia municipality",
"latitude": "42.696701",
"longitude": "23.332965",
"type": "parking"
}
}
}
我一直收到一个未定义的。我正在尝试在地图上添加这些标记并为它们制作一个信息框，您能否告诉我如何进行。提前感谢您的帮助。
-
你显然混淆了库，方法
addMarker在jquery.ui.map中可用....因此，请使用此库而不是 http://gmap.nurtext.de 中的库 -
JSON 没有
pin-属性，属性的名称为pins。但是，尽管您的 JSON 有效，但它不会创建预期的结果。属性名称必须是唯一的，返回的 JSON 的pins-属性将只包含一个pin属性。您可以在 http://jsonlint.com/验证 JSON，您将看到结果为：{ "pins": { "pin": { "name": "Sofia municipality", "latitude": "42.696701", "longitude": "23.332965", "type": "parking" } } }
JSON 文件的内容应为：
{
"pins": [
{
"name": "Sofia Bike Rental",
"latitude": "42.692821",
"longitude": "23.328738",
"contact": "www.sofiabikerental.com",
"type": "rent"
},
{
"name": "Sofia Rent Center",
"latitude": "42.6674952",
"longitude": "23.2857399",
"contact": "www.sofiarentcenter.com",
"type": "rent"
},
{
"name": "Drag Zone",
"latitude": "42.6700007",
"longitude": "23.2928839",
"contact": "www.velomania-bg.com",
"type": "service"
},
{
"name": "True Riders",
"latitude": "42.682068",
"longitude": "23.322313",
"contact": "www.trueriders.bg",
"type": "service"
},
{
"name": "NDK",
"latitude": "42.685882",
"longitude": "23.318138",
"type": "parking"
},
{
"name": "Sofia municipality",
"latitude": "42.696701",
"longitude": "23.332965",
"type": "parking"
}
]
}
。然后，您可以通过循环data.pins来绘制标记。
此外：当您使用该jquery.ui.map时，您可以通过以下方式简单地创建地图：
$('#map_canvas').gmap();
演示：http://jsfiddle.net/doktormolle/t5cfgjdu/