Jac*_*ack 5 javascript arrays jquery json google-maps-api-3
我正试图在地图上放置一些谷歌地图标记,其位置来自API.我试图创建一个计算所有JSON数据的for循环,并在数组中放入"A驱动程序名称,驱动程序纬度和驱动程序经度".然后,这个数组应该帮助谷歌地图在地图上列出theese位置.代码示例如下:
setTimeout(function () {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(62.457171, 17.350953),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var url = "http://blackcab.didair.se/api/drivers";
var name;
var lat;
var lon;
var locations;
$.getJSON(url,
function (response) {
name = response.drivers[n].name;
lat = response.drivers[n].currentLat;
lon = response.drivers[n].currentLon;
for (var n = 0; n < response.drivers.length; n++)
var locations = [
[name, lat, lon, n], ];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
});
}, 3000);
由于我希望它在所有时间内重新加载theese位置,因此此代码位于间隔内.我查看了我在Google Chrome网站开发人员工具中遇到的错误,但后来我遇到了更多错误.有一个简单的解决方案吗？一个真正的"坚果饼干".
提前致谢!
插口
你的代码似乎有很多错误.除了花括号之外,例如你在实际拥有声明N的for循环之前使用N.另外:
您不应该一直重新创建地图对象.maps对象应该在被调用的函数之外.
JSON调用应该是SetInterval函数中唯一的内容.基本上,每次调用inerval时,您都将清除并设置标记.
我认为接近这个的事情会更好:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var image = {
url: 'https://developers.google.com/maps/documentation/javascript/examples/images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels tall.
size: new google.maps.Size(20, 32),
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
anchor: new google.maps.Point(0, 32)
};
var shadow = {
url: 'https://developers.google.com/maps/documentation/javascript/examples/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.
size: new google.maps.Size(37, 32),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0, 32)
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(62.457171, 17.350953),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
setTimeout(function () {
loadData();
},500);
function loadData()
{
//alert("Loading");
var marker, i;
var url = "http://blackcab.didair.se/api/drivers";
var name;
var lat;
var lon;
var locations;
$.getJSON(url, function (response) {handleData(response)});
}
function handleData(response)
{
//alert(response);
var n;
for(n=0; n<response.drivers.length; n++)
{
name = response.drivers[n].name;
//alert(name);
lat = response.drivers[n].currentLat;
lon = response.drivers[n].currentLon;
var myLatLng = new google.maps.LatLng(lat,lon);
var marker = new google.maps.Marker({
position: myLatLng,
shadow: shadow,
icon:image,
map: map,
title: name,
zIndex: 1
});
}
}
</script>
</body>
</html>
但是缺少具体示例,您需要删除以前的标记,仅添加新标记,然后添加信息框.