Question

我需要帮助来放置标记并将它们取消，因为他们已经向我询问了与Uber类似的应用程序，问题是当我移动汽车时在前一个位置保持可见并且我不知道如何移除它和把新品牌赋予运动效果。

我的参考：

https://developers.google.com/maps/documentation/javascript/examples/icon-complex?hl=es-419

我的代码：

function initMap() {
    var styledMap = new google.maps.StyledMapType(styles, { name: "Styled Map" });

    var mapOptions = {
        zoom: 18,
        center: new google.maps.LatLng(19.302286, -99.192976),
        mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
        }
    };
    var map = new google.maps.Map(document.getElementById('map'),
        mapOptions);
    map.mapTypes.set('map_style', styledMap);
    map.setMapTypeId('map_style');
    setInterval(function() { setMarkers(map); }, 5000);
}

var LAC1 = [
    19.3027874, 19.302775, 19.302708, 19.302647, 19.302601, 19.302537,
    19.302513, 19.302472, 19.302444, 19.302397, 19.302353, 19.302332,
    19.302298, 19.302283, 19.302265, 19.302270, 19.302190, 19.302186,
    19.302198, 19.302268, 19.302334, 19.302449, 19.302506, 19.302659,
    19.302870, 19.303052, 19.303217
];
var LC1 = [
    -99.1872615, -99.187810, -99.188320, -99.188846, -99.189252, -99.189853,
    -99.190115, -99.190555, -99.190870, -99.191272, -99.191633, -99.191913,
    -99.192264, -99.192547, -99.192755, -99.192918, -99.193718, -99.194205,
    -99.194586, -99.195342, -99.195847, -99.196445, -99.196624, -99.197140,
    -99.197661, -99.198034, -99.198320
];
var conT = 0;

function setMarkers(map) {
    if (conT < 27) {
        var camiones = [
            ['Camion 1', LAC1[conT], LC1[conT], 1]
        ];
        conT = conT + 1;
    } else {
        conT = null;
        conT = 0;
    }
    var image = {
        url: 'camion.png',
        scaledSize: new google.maps.Size(70, 30) // scaled size
    };
    var shape = {
        coords: [1, 1, 1, 20, 18, 20, 18, 1]
    };
    for (var i = 0; i < camiones.length; i++) {

        var camionT = camiones[i];
        var marker = new google.maps.Marker({
            position: { lat: camionT[1], lng: camionT[2] },
            map: map,
            icon: image,
            shape: shape,
            title: camionT[0],
            zIndex: camionT[3]
        });
    }
}

example image

Answer 1

首先，将您的标记添加到数组中，同时将它们添加到地图中（在setMarkers中）。然后使用：

 function setMapOnAll(map) {
    for (var i = 0; i < markers.length; ++i) {
      markers[i].setMap(map);
    }
  }

setMapOnAll(null);

每次在区间内的setMarkers之前调用它。

之后你可以更进一步，只删除真正移动的那些。（通过分析阵列中的标记和新标记）

Answer 2

如果您只想要一个标记，并且想要更新其位置，只需创建一次，然后移动它。

// if marker doesn't exist, create it
if (!marker || !marker.setPosition) {
  marker = new google.maps.Marker({
    position: {
      lat: camionT[1],
      lng: camionT[2]
    },
    map: map,
    title: camionT[0],
    zIndex: camionT[3]
  });
} else {
// if marker already exists, move it
  marker.setPosition({
    lat: camionT[1],
    lng: camionT[2]
  });
}

proof of concept fiddle

代码段

＆＃13;

function initMap() {
  var mapOptions = {
    zoom: 16,
    center: new google.maps.LatLng(19.302286, -99.192976),
  };
  var map = new google.maps.Map(document.getElementById('map'),
    mapOptions);
  setInterval(function() {
    setMarkers(map);
  }, 5000);
}

var LAC1 = [
  19.3027874, 19.302775, 19.302708, 19.302647, 19.302601, 19.302537,
  19.302513, 19.302472, 19.302444, 19.302397, 19.302353, 19.302332,
  19.302298, 19.302283, 19.302265, 19.302270, 19.302190, 19.302186,
  19.302198, 19.302268, 19.302334, 19.302449, 19.302506, 19.302659,
  19.302870, 19.303052, 19.303217
];
var LC1 = [-99.1872615, -99.187810, -99.188320, -99.188846, -99.189252, -99.189853, -99.190115, -99.190555, -99.190870, -99.191272, -99.191633, -99.191913, -99.192264, -99.192547, -99.192755, -99.192918, -99.193718, -99.194205, -99.194586, -99.195342, -99.195847, -99.196445, -99.196624, -99.197140, -99.197661, -99.198034, -99.198320];
var conT = 0;
var marker;

function setMarkers(map) {
  if (conT < 27) {
    var camiones = [
      ['Camion 1', LAC1[conT], LC1[conT], 1]
    ];
    conT = conT + 1;
  } else {
    conT = null;
    conT = 0;
  }
  for (var i = 0; i < camiones.length; i++) {

    var camionT = camiones[i];
    if (!marker || !marker.setPosition) {
      marker = new google.maps.Marker({
        position: {
          lat: camionT[1],
          lng: camionT[2]
        },
        map: map,
        title: camionT[0],
        zIndex: camionT[3]
      });
    } else {
      marker.setPosition({
        lat: camionT[1],
        lng: camionT[2]
      });
    }
  }
}
google.maps.event.addDomListener(window, "load", initMap);

＆＃13;

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

＆＃13;

如何清理标记谷歌地图

2 个答案: