我必须在谷歌地图上添加多个标记,但数据在extern json文件中.
目前我正在这样运行它
var json = [
{
"title": "Stockholm",
"lat": 59.3,
"lng": 18.1,
"description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)"
},
{
"title": "oslo",
"lat": 59.9,
"lng": 10.8,
"description": "oslo is a municipality, and the capital and most populous city of norway with a metropolitan population of 1,442,318 (as of 2010)."
},
{
"title": "copenhagen",
"lat": 55.7,
"lng": 12.6,
"description": "copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)."
}
];
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title
});
}
现在我试图将Json文件排除到另一个文件,但是sadyl我不能让它工作;(
码
$.getJSON("foo.txt", function(json1) {
});
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title
});
}
foo.txt的
{
"title": "Stockholm",
"lat": 59.3,
"lng": 18.1,
"description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)"
},
{
"title": "oslo",
"lat": 59.9,
"lng": 10.8,
"description": "oslo is a municipality, and the capital and most populous city of norway with a metropolitan population of 1,442,318 (as of 2010)."
},
{
"title": "copenhagen",
"lat": 55.7,
"lng": 12.6,
"description": "copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)."
}
谢谢你的帮助
解决方法:
您的代码中存在两个问题.你的json文件错过了[在开头和]结尾.你的javascript也错了,你想在getJSON的回调中用json做些什么.您的问题的代码是：
$.getJSON("foo.txt", function(json1) {
$.each(json1, function(key, data) {
var latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title
});
});
});
编辑：
这是一个基于google maps tutorial的工作示例.您需要正确的文件foo.txt：
<!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=YOUR_API_KEY&sensor=true">
</script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(58, 16),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body onl oad="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON("foo.txt", function(json1) {
$.each(json1, function(key, data) {
var latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
title: data.title
});
marker.setMap(map);
});
});
});
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
