Question

我正在努力在我的网站上实施Google地图，但是我觉得非常烦人的是，当我点击某个位置时，添加的标记无法删除。如果有人知道如何仅删除添加的标记以及如何仅在用户点击居中标记时才进行反弹动画？

这是我的代码：

function myMap() {
    var myCenter =new google.maps.LatLng(-34.035088, 23.046469);
    var mapCanvas = document.getElementById("googleMap");
    var mapOptions = {center: myCenter, zoom: 11,
        panControl: true,
        zoomControl: true,
        mapTypeControl: true,
        scaleControl: true,
        streetViewControl: true,
        overviewMapControl: true,
        rotateControl: true,
        mapTypeId:google.maps.MapTypeId.HYBRID
    };
    var map = new google.maps.Map(mapCanvas, mapOptions);
    var marker = new google.maps.Marker({position:myCenter, 
animation:google.maps.Animation.BOUNCE});
        marker.setMap(map);
        google.maps.event.addListener(marker, 'click', 
function() {
    var pos = map.getZoom();
        map.setZoom(15);
        map.setCenter(marker.getPosition());
        window.setTimeout(function(){map.setZoom(pos);},3000);
    });
    var infowindow = new google.maps.InfoWindow({
        content: 'Welcome to Knysna!'
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
    google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(map, event.latLng);
    });
    function placeMarker(map, location) {
        var marker = new google.maps.Marker({
            position: location,
        map: map
        });
        var infowindow = new google.maps.InfoWindow({
            content: 'Latitude: ' + location.lat() +
            '<br>Longitude: ' + location.lng()
        });
        infowindow.open(map, marker);
    }
}

Answer 1

删除marker并添加BOUNCE切换事件。

使用我用来解决问题的那些文件。

动画：Bounce

标记：Remove Marker

希望能回答你的问题。

function myMap() {
  var myCenter = new google.maps.LatLng(-34.035088, 23.046469);
  var mapCanvas = document.getElementById('googleMap');
  var markers = []; /*Store new marker in array*/
  var bounds = new google.maps.LatLngBounds();
  var mapOptions = {
    center: myCenter,
    zoom: 10,
    panControl: true,
    zoomControl: true,
    scaleControl: true,
    streetViewControl: true,
    overviewMapControl: true,
    rotateControl: true,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  var map = new google.maps.Map(mapCanvas, mapOptions);
  var marker = new google.maps.Marker({
    position: myCenter,
    map: map,
    id: 'Knysna'
  });
  var infowindow = new google.maps.InfoWindow({
    content: 'Welcome to Knysna!'
  });
  markers.push(marker); // Push new marker to array.
  // Event Listeners
  marker.addListener('click', function() {
    toggleBounce();
  });
  google.maps.event.addListener(marker, 'click', function() {
    var pos = map.getZoom();
    map.setZoom(15);
    map.setCenter(marker.getPosition());
//     window.setTImeout(function() {
//       map.setZoom(pos);
//     }, 3000);
    infowindow.open(map, marker);
  });
  google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(map, event.latLng);
  });
  // Animation
  function toggleBounce() {
    if(marker.getAnimation() !== null) {
      marker.setAnimation(null);
    } else {
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }
  }
  // Marker
  function placeMarker(map, location) {
    var marker = new google.maps.Marker({
      position: location,
      map: map
    });
    var infowindow = new google.maps.InfoWindow({
      content: 'Latitude: ' + location.lat() +
            '<br>Longitude: ' + location.lng() + '<br><button id=\'del\'>Delete</button>'
    });
    infowindow.open(map, marker);
    infowindow.addListener('domready', function() {
      var delButton = document.getElementById('del');
      delButton.onclick = function() {
        marker.setMap(null);
      }
    })
    markers.push(marker);
  }
}

JSBin：Solution

删除谷歌＆＃39;点击＆＃39;地图标记

1 个答案: