無法獲得聽衆打開信息窗口上點擊的下拉動畫

<!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>

我可以在顯示標題工作側翻這一下降的標記，但在動畫的下降，我不能得到「點擊」監聽器爲infoWindow工作。我真的需要另一套眼睛來看這個。我可以找到的唯一例子是顯示拖放動畫，或者infoWindow工作，但不能同時工作。無法獲得聽衆打開信息窗口上點擊的下拉動畫

來源

2016-03-07 Werks

看看javascript控制檯中的錯誤。 – geocodezip

您的代碼錯誤在這裏。

// 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); 

}

來源

2016-03-07 18:41:14 wf9a5m75

這兩個答案都會打開infoWindow，但所有標記中的數據都是最後一個「描述」字段。鼠標懸停是正確的，但infoWindow數據是錯誤的。 – Werks

我認爲我創建了一系列標記，但只做了一個全局InfoWindow。如果可能的話，我需要創建一個與每個標記相關聯的infoWindow。 – Werks

我與你的代碼Uncaught TypeError: marker.addListener is not a function JavaScript錯誤在這行（attachContent函數內）：

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

的要傳遞到該函數，不是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>

來源

2016-03-07 19:18:29 geocodezip

非常感謝，絕對修復它。 – Werks

如果這回答了您的問題，請[接受它]（http://meta.stackoverflow.com/questions/5234/how-does-accepting-an-answer-work） – geocodezip

無法獲得聽衆打開信息窗口上點擊的下拉動畫

回答

相關問題