Question

    <!doctype html>
    <head>
      <meta charset="utf-8">
      <title>Test</title>
      <link rel="stylesheet" href="style.css">
      <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <style>
      html, body  height: 100%;}
      body {font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif;  font-size: 16px;  margin: 0;  padding: 0;}
      img  { vertical-align: text-bottom; }
      #map { height: 100%; }
    </style>
    </head>
    <body>
     <div id="map"></div> 
    <script>           

    <code> remove to run
    var json = [
    {
     "title": "Aamodt's Apple Farm",
     "lat": 45.0421379,
     "lng": -92.8657445,
     "color": "red",
     "description": "6428 Manning Ave N<br />Stillwater, MN<br />651-439-3127"
    },            
    {
     "title": "American Legion Post 643",
     "lat": 44.7776140,
     "lng": -93.3410110,
     "color": "green",
     "description": "12375 Princeton Ave.<br />Savage, MN<br />612-270-3519"
    },
    {
     "title": "Wilderness Bar & Grill, Elysian",
     "lat": 44.197934,
     "lng": -93.681275,
     "color": "green",
     "description": "505 W Highway 60<br />Elysian, MN<br />507-267-4455"
    },
    {
     "title": "Winjum`s Shady Acres Restaurant & Resort",
     "lat": 44.3301350,
     "lng": -93.3608110,
     "color": "green",
     "description": "17759 177th St W<br />Faribault, MN<br />507-334-6661"
    }]
        </code>   remove to run    
    var map;
    var color;
    var markers = [];

    // create map
    var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(44.7776140, -93.3410110),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    // create infoWindow
    var infoWindow = new google.maps.InfoWindow();

     for (var i = 0; i < json.length; i++) {
      var data = json[i],
      latLng = new google.maps.LatLng(data.lat, data.lng);
      if (data.color == "green") {
          color = "#015982";
      }
      if (data.color == "red") {
          color = "#FF0000";
      }
      title = data.title;
      description = data.description;
      addMarkerWithTimeout(latLng, i * 200, color, title, description);
     }

    // add marker with delay
    function addMarkerWithTimeout(position, timeout, color, title, description) {
      window.setTimeout(function() {
          marker=markers.push(new google.maps.Marker({
          position: position,
          map: map,
          title: title,
          info: description,
          icon: {
                path: google.maps.SymbolPath.CIRCLE,
                scale: 7.5,
                fillColor: color,
                fillOpacity: 0.8,
                strokeWeight: 0.4
                },
          animation: google.maps.Animation.DROP
         }));
       attachContent(marker, data);   
      }, timeout);

    }

    // open infor window on click
    function attachContent(marker, data) {
      marker.addListener('click', function() {
      var content = data.title + "<br />" + data.description;
      infoWindow.setContent(content);
      infoWindow.open(map, marker);
      })(marker, data);
    }

    </script>

    </body>
    </html>

我可以使用显示标题的工作翻转来制作此标记，但是如果动画下降，则无法点击＆＃39;监听器使infoWindow工作。我真的需要另一套关注这一点。我能找到的唯一例子是显示drop动画，或者infoWindow工作但不能同时工作。

Answer 1

您的代码在此处出错。

// add marker with delay
function addMarkerWithTimeout(position, timeout, color, title, description) {
  window.setTimeout(function() {
    var marker = new google.maps.Marker({
      position: position,
      map: map,
      title: title,
      info: description,
      icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 7.5,
        fillColor: color,
        fillOpacity: 0.8,
        strokeWeight: 0.4
      },
      animation: google.maps.Animation.DROP
    });
    markers.push(marker);
    attachContent(marker, data);
  }, timeout);

}

Answer 2

我的代码Uncaught TypeError: marker.addListener is not a function在此行（attachContent函数内）出现javascript错误：

marker.addListener('click', function() {

您传入该函数的marker不是google.maps.Marker对象，它是Array.push的返回值（数组的长度）。更改addMarkerWithTimeout：

// add marker with delay
function addMarkerWithTimeout(position, timeout, color, title, description) {
  window.setTimeout(function() {

      marker=markers.push(new google.maps.Marker({
      position: position,
      map: map,
      title: title,
      info: description,
      icon: {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 7.5,
            fillColor: color,
            fillOpacity: 0.8,
            strokeWeight: 0.4
            },
      animation: google.maps.Animation.DROP
     }));
   attachContent(marker, data);   
  }, timeout);
}

要：

// add marker with delay
function addMarkerWithTimeout(position, timeout, color, title, description) {
  window.setTimeout(function() {
    var marker = new google.maps.Marker({
      position: position,
      map: map,
      title: title,
      info: description,
      icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 7.5,
        fillColor: color,
        fillOpacity: 0.8,
        strokeWeight: 0.4
      },
      animation: google.maps.Animation.DROP
    });
    markers.push(marker);
    attachContent(marker, data);
  }, timeout);
}

proof of concept fiddle

代码段

var color;
var markers = [];

function initialize() {
  // create map
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(44.7776140, -93.3410110),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  // create infoWindow
  var infoWindow = new google.maps.InfoWindow();

  for (var i = 0; i < json.length; i++) {
    var data = json[i],
      latLng = new google.maps.LatLng(data.lat, data.lng);
    if (data.color == "green") {
      color = "#015982";
    }
    if (data.color == "red") {
      color = "#FF0000";
    }
    title = data.title;
    description = data.description;
    addMarkerWithTimeout(latLng, i * 200, color, title, description, data);
  }

  // add marker with delay
  function addMarkerWithTimeout(position, timeout, color, title, description, data) {
    window.setTimeout(function() {
      var marker = new google.maps.Marker({
        position: position,
        map: map,
        title: title,
        info: description,
        icon: {
          path: google.maps.SymbolPath.CIRCLE,
          scale: 7.5,
          fillColor: color,
          fillOpacity: 0.8,
          strokeWeight: 0.4
        },
        animation: google.maps.Animation.DROP
      });
      markers.push(marker);
      attachContent(marker, data);
    }, timeout);
  }

  // open infor window on click
  function attachContent(marker, data) {
    marker.addListener('click', function(evt) {
      var content = data.title + "<br />" + data.description;
      infoWindow.setContent(content);
      infoWindow.open(map, marker);
    });
  }
}

google.maps.event.addDomListener(window, "load", initialize);

var json = [{
  "title": "Aamodt's Apple Farm",
  "lat": 45.0421379,
  "lng": -92.8657445,
  "color": "red",
  "description": "6428 Manning Ave N<br />Stillwater, MN<br />651-439-3127"
}, {
  "title": "American Legion Post 643",
  "lat": 44.7776140,
  "lng": -93.3410110,
  "color": "green",
  "description": "12375 Princeton Ave.<br />Savage, MN<br />612-270-3519"
}, {
  "title": "Wilderness Bar & Grill, Elysian",
  "lat": 44.197934,
  "lng": -93.681275,
  "color": "green",
  "description": "505 W Highway 60<br />Elysian, MN<br />507-267-4455"
}, {
  "title": "Winjum`s Shady Acres Restaurant & Resort",
  "lat": 44.3301350,
  "lng": -93.3608110,
  "color": "green",
  "description": "17759 177th St W<br />Faribault, MN<br />507-334-6661"
}];

html,
body {
  height: 100%;
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
}
img {
  vertical-align: text-bottom;
}
#map {
  height: 100%;
}

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

无法通过下拉动画

2 个答案: