我正在尝试在我的 map 上放置一些带有 API 位置的 Google map 标记。我试图制作一个计算所有 JSON 数据的 for 循环，并将“驱动程序名称、驱动程序纬度和驱动程序经度”放入数组中。那么这个数组是否应该帮助谷歌地图在 map 上标出这些位置。下面的代码示例:
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);
这段代码在一个区间内，因为我希望它一直重新加载这些位置。 我查看了我在 Google Chrome 网络开发人员工具中遇到的错误，但后来又遇到了更多错误。有一个简单的解决方案吗？真正的“胡桃夹子”。
提前致谢!
jack
最佳答案
您的代码中似乎有不少错误。除了花括号，例如你在实际拥有声明 N 的 for 循环之前使用 N。 另外:
您不应该一直重新创建您的 map 对象。 map 对象应该在被调用的函数之外。
JSON 调用应该是您的 SetInterval 函数中的唯一内容。 本质上，您将在每次调用间隔时清除和设置标记。
我认为接近这个的东西更好:
<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>
但是缺少具体示例，您需要删除以前的标记，仅添加新标记，并添加信息框。
关于javascript - 如何从外部 JSON 数据源在 Google map 上放置标记？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15953167/