使用Google maps API v3在地图上放置不同颜色的标记
Drop different coloured markers on map using Google maps API v3
代码中的标记代表车辆，现在我想做的是通过标记的颜色(分别为绿色，红色，黄色)来检查车辆的状态(移动，静止，停用)。我得到的是，当我点击按钮看到所有的标记，所有的标记出现，是相同的颜色(红色)，当我把鼠标悬停在这些标记，他们显示"5"，这是阵列中的最后一个标记。我知道我正在做一些蹩脚的错误，可以有人请看看我的代码，告诉我我错过了什么?我的for循环有一些错误。
代码片段(来自jsfiddle):
var map;
var all = [
{"name": '0', "lat": 24.92650881416285, "lng": 67.10869789123535, "status": 'Deactivated'},
{"name": '1', "lat": 24.845937391711946, "lng": 66.73162758350372, "status": 'Stationary'},
{"name": '2', "lat": 24.89372598975854, "lng": 67.08657503128052, "status": 'Deactivated'},
{"name": '3', "lat": 24.803024353889768, "lng": 67.02959954738617, "status": 'Moving'},
{"name": '4', "lat": 25.032825073841558, "lng": 66.8778133392334, "status": 'Moving'},
{"name": '5', "lat": 24.91757686884615, "lng": 67.19997346401215, "status": 'Stationary'}
];
var markers = [];
function initialize() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(24.89372598975854,67.08657503128052),
zoom: 11,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
}
function drop(){
//end.setVisible(false);
map.setZoom(10);
clearMarkers();
for (var j = 0; j < all.length; j++) {
addMarker(all[j], j * 200);
}
// stop();
}
function clearMarkers(){
for (var j = 0; j < markers.length; j++) {
markers[j].setMap(null);
}
markers = [];
}
function addMarker(position, timeout){
var icon="";
for(var k=0; k<all.length; k++)
{
var data = all[k];
switch(data.status){
case "Stationary":
icon = "red";
break;
case "Moving":
icon = "green";
break;
case "Deactivated":
icon = "yellow";
break;
}
}
icon="http://maps.google.com/mapfiles/ms/micons/" + icon + ".png";
window.setTimeout(function() {
markers.push(new google.maps.Marker({
position: position,
map: map,
title: data.name,
animation: google.maps.Animation.DROP,
icon: new google.maps.MarkerImage(icon)
}));
}, timeout);
}
google.maps.event.addDomListener(window, 'load', initialize);<script src="https://maps.googleapis.com/maps/api/js"></script>
<center>
<br><br>
<input onclick="drop();" type=button value="Show All">
<br><br>
<div id="map" style="width:1000px;height:460px;"></div>
</center>也许你想要这样的东西:
var map;
var all = [
{ "name": '0', "lat": 24.92650881416285, "lng": 67.10869789123535, "status": 'Deactivated' },
{ "name": '1', "lat": 24.845937391711946, "lng": 66.73162758350372, "status": 'Stationary' },
{ "name": '2', "lat": 24.89372598975854, "lng": 67.08657503128052, "status": 'Deactivated' },
{ "name": '3', "lat": 24.803024353889768, "lng": 67.02959954738617, "status": 'Moving' },
{ "name": '4', "lat": 25.032825073841558, "lng": 66.8778133392334, "status": 'Moving' },
{ "name": '5', "lat": 24.91757686884615, "lng": 67.19997346401215, "status": 'Stationary' }
];
var markers = [];
function initialize() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(24.89372598975854, 67.08657503128052),
zoom: 11,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
}
function drop() {
//end.setVisible(false);
map.setZoom(10);
clearMarkers();
for (var j = 0; j < all.length; j++) {
addMarker(all[j], j * 200);
}
// stop();
}
function clearMarkers() {
for (var j = 0; j < markers.length; j++) {
markers[j].setMap(null);
}
markers = [];
}
function addMarker(data, timeout) {
var icon = "";
switch (data.status) {
case "Stationary":
icon = "red";
break;
case "Moving":
icon = "green";
break;
case "Deactivated":
icon = "yellow";
break;
}
icon = "http://maps.google.com/mapfiles/ms/micons/" + icon + ".png";
window.setTimeout(function() {
markers.push(new google.maps.Marker({
position: { 'lat': data.lat, 'lng': data.lng },
map: map,
title: data.name,
animation: google.maps.Animation.DROP,
icon: new google.maps.MarkerImage(icon)
}));
}, timeout);
}
google.maps.event.addDomListener(window, 'load', initialize);html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<input onclick="drop();" type=button value="Show All">
<div id="map" style="width:1000px;height:460px;"></div>好的，我做到了。当我将@Vadim Gremyachev提供的代码与我的原始代码集成时，出现了一些问题，但现在它可以工作了。
var map;
var all = [
{"name": '0', "lat": 24.92650881416285, "lng": 67.10869789123535, "status": 'Deactivated'},
{"name": '1', "lat": 24.845937391711946, "lng": 66.73162758350372, "status": 'Stationary'},
{"name": '2', "lat": 24.89372598975854, "lng": 67.08657503128052, "status": 'Deactivated'},
{"name": '3', "lat": 24.803024353889768, "lng": 67.02959954738617, "status": 'Moving'},
{"name": '4', "lat": 25.032825073841558, "lng": 66.8778133392334, "status": 'Moving'},
{"name": '5', "lat": 24.91757686884615, "lng": 67.19997346401215, "status": 'Stationary'}
];
var markers = [];
function initialize() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(24.89372598975854,67.08657503128052),
zoom: 11,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
}
function drop(){
//end.setVisible(false);
map.setZoom(10);
clearMarkers();
for (var j = 0; j < all.length; j++) {
addMarker(all[j], j * 200);
}
// stop();
}
function clearMarkers(){
for (var j = 0; j < markers.length; j++) {
markers[j].setMap(null);
}
markers = [];
}
function addMarker(position, timeout){
var icon="";
var data = position;
switch(data.status){
case "Stationary":
icon = "red";
break;
case "Moving":
icon = "green";
break;
case "Deactivated":
icon = "yellow";
break;
}
icon="http://maps.google.com/mapfiles/ms/micons/" + icon + ".png";
window.setTimeout(function() {
markers.push(new google.maps.Marker({
position: position,
map: map,
title: data.name,
animation: google.maps.Animation.DROP,
icon: new google.maps.MarkerImage(icon)
}));
}, timeout);
}
google.maps.event.addDomListener(window, 'load', initialize); <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<center>
<br><br>
<input onclick="drop();" type=button value="Show All">
<br><br>
<div id="map" style="width:1000px;height:460px;"></div>
</center>相关文章：
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 高亮显示时编辑文本大小和颜色
- 用与线条相同的颜色填充多折线图上的点
- 更改使用Chart.js创建的图表中的轴线颜色
- 如何使用jquery更改html中的背景颜色
- 动态更改高图中的系列颜色
- 单击超链接时，如何使用Google Maps API v3缩放地图
- jsf中两个字符串的颜色代码差异
- 我们如何使用css或JavaScript在i/j上更改句点(点）的颜色
- d3.hexbin插件-动态定义颜色域以适应数据
- 我如何制作一个JS函数，它可以从相似的原始颜色双向更改为某个颜色
- 每个选择器的Jquery css颜色都在变化，但字体大小却没有变化
- 使用Google Maps API向标记添加多个字符
- Javascript对象类在单击时打开窗口进行颜色选择，并在更改时替换对象背景颜色
- jQuery动画-边框宽度和颜色
- 如何在Google Maps v3 API中改变KmlLayer的颜色
- Here.com (Nokia Api for Maps):如何在点击时改变颜色来管理圆圈
- 使用Google maps API v3在地图上放置不同颜色的标记
- Google Maps JavaScript API -用一种颜色显示未激活的替代路由，用另一种颜色显示激活的替代路由
- 如何在不创建新对象的情况下改变nokia.maps.map.StandardMarker的颜色
