使用Google maps API v3在地图上删除不同颜色的标记

时间：2015-08-18 10:19:05

标签： javascript google-maps-api-3

我的代码中的标记代表车辆，现在我想做的是通过标记的颜色（分别为绿色，红色，黄色）检查车辆的状态（移动，静止，停用）。我得到的是当我点击按钮看到所有标记，所有标记出现并且颜色相同（红色）时，当我将鼠标悬停在那些标记上时，它们显示'5'，这是数组中的最后一个标记。 我知道我犯了一些蹩脚的错误，有人可以看看我的代码并告诉我我错过了什么吗？我的for循环中存在一些错误。

https://jsfiddle.net/va87foja/1/

代码段（来自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>

2 个答案:

答案 0 :(得分：1)

可能你想要这样的东西：

   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>

答案 1 :(得分：0)

好的，我做到了。当我将@Vadim Gremyachev提供的代码与我的原始代码集成但现在它正在工作时出现了一些问题。

＆＃13;
＆＃13; 
import Realm

class Supplier: RLMObject {
    dynamic var name = ""
    dynamic var email = ""
    dynamic var phone = ""    
    dynamic var products = RLMArray(objectClassName: ProductsDao.className())
}
＆＃13; 
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);
＆＃13;
＆＃13;
＆＃13;

https://jsfiddle.net/va87foja/2/

相关问题
最新问题