我正在使用JSON（本地文件）加载一些标记信息，但出于某种原因，只有循环中的最后一个标记显示在地图上。
我可以在控制台中看到所有坐标都正确打印，所以我很确定循环没问题，并且大部分代码都没问题。
<script>
function myMap() {
var mapCanvas = document.getElementById("content_map" );
var mapOptions = {
center: new google.maps.LatLng(55.812757, -4.195363),
zoom: 5,
disableDefaultUI: true,
styles: [
{
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#bdbdbd"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "poi.business",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#0d99ba"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "road.local",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#0d99ba"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
}
]
};
var contentString = '<div id="content">'+
'<img src="./img/logo_img_map.png" alt="">'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
$.getJSON('data.json', function(json) {
for (i = 0; i < json.ChargeDevice.length; i++) {
addMarker(json.ChargeDevice[i].ChargeDeviceLocation.Latitude,json.ChargeDevice[i].ChargeDeviceLocation.Longitude);
console.log(json.ChargeDevice[i].ChargeDeviceLocation.Latitude, json.ChargeDevice[i].ChargeDeviceLocation.Longitude);
};
function addMarker(lat,lng) {
var image = './img/logo_img_map.png';
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,
icon: image
});
};
});
};
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY"></script>
我现在已经查看了大量的线程，但我无法弄清楚为什么它在这种情况下不起作用。我正在运行我的函数，因为它发生在循环中......所以标记不应该保留吗？
注意：我的API密钥已被删除，因此它不会在线显示，但它可以在我的网络服务器上运行，并且地图加载正常。当我在JSON文件中有2个数据集时，真的只显示一个标记。
我还没有完成点击率，但我认为现在不重要吗？
任何帮助将不胜感激！
答案 0 :(得分：0)
用以下代码替换你的for循环并检查它是否有效。我没有测试过，所以如果您在控制台中看到更改内容，请分享。
for (var i = 0; i < json.ChargeDevice.length; i++) {
setTimeout(function(){
addMarker(json.ChargeDevice[i].ChargeDeviceLocation.Latitude,json.ChargeDevice[i].ChargeDeviceLocation.Longitude)
console.log(json.ChargeDevice[i].ChargeDeviceLocation.Latitude, json.ChargeDevice[i].ChargeDeviceLocation.Longitude);
};
},i*200);
答案 1 :(得分：0)
我想也许问题是你要为每个标记声明一张新地图。我会将地图声明一次，并为每个标记引用它。
尝试以下方法：
<script>
function myMap() {
var mapCanvas = document.getElementById("content_map" );
var mapOptions = {
center: new google.maps.LatLng(55.812757, -4.195363),
zoom: 5,
disableDefaultUI: true,
styles: [
{
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#bdbdbd"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "poi.business",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#0d99ba"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "road.local",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#0d99ba"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
}
]
};
var map = new google.maps.Map(mapCanvas, mapOptions);
var contentString = '<div id="content">'+
'<img src="./img/logo_img_map.png" alt="">'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
$.getJSON('data.json', function(json) {
for (var i = 0; i < json.ChargeDevice.length; i++) {
addMarker(json.ChargeDevice[i].ChargeDeviceLocation.Latitude,json.ChargeDevice[i].ChargeDeviceLocation.Longitude);
console.log(json.ChargeDevice[i].ChargeDeviceLocation.Latitude, json.ChargeDevice[i].ChargeDeviceLocation.Longitude);
};
function addMarker(lat,lng) {
var image = './img/logo_img_map.png';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,
icon: image
});
};
});
};
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY"></script>