Question

我对编码非常陌生，实际上刚开始学习，所以我可以制作我正在制作的地图。我一直在努力使事情有效，似乎我遇到了一个障碍。

事情是我的地图上有多个标记，我希望它们各有不同的InfoWindows，并在点击时添加Bounce Animation。

我的代码目前是：

<script type="text/javascript">
  function initialize() {
    var myLatlng = new google.maps.LatLng(-23.425553, -51.9382952);
    var Deville = new google.maps.LatLng(-23.4253651, -51.9363681);
    var Indaia = new google.maps.LatLng(-23.420335, -51.9415658);
    var Elo = new google.maps.LatLng(-23.4249708, -51.9400302);
    var Bristol = new google.maps.LatLng(-23.4236666, -51.9370105);
    var Aeroporto = new google.maps.LatLng(-23.4796959, -52.0121323);
    var Rodoviaria = new google.maps.LatLng(-23.4255414, -51.910845);
    var CasaEmilia = new google.maps.LatLng(-23.4246251, -51.9405511);
    var CentroComercial = new google.maps.LatLng(-23.4255029, -51.9461872);
    var Binho = new google.maps.LatLng(-23.4227188, -51.9438343);
    var CasaUniverso = new google.maps.LatLng(-23.4232428, -51.93649);
    var Divinita = new google.maps.LatLng(-23.4240644, -51.9363321);
    var CasaNoivos = new google.maps.LatLng(-23.4287239, -51.9328168);
    var Hipico = new google.maps.LatLng(-23.4227585, -51.9688396);


    var myOptions = {
      center: myLatlng,
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

    var Deville = new google.maps.Marker({
        position: Deville,
        map: map,
        title:"Hotel Deville",
        animation: google.maps.Animation.DROP,
        });
    var Indaia = new google.maps.Marker({
        position: Indaia,
        map: map,
        title:"Hotel Indaiá",
        animation: google.maps.Animation.DROP,
        });
    var Elo = new google.maps.Marker({
        position: Elo,
        map: map,
        title:"Hotel Elo",
        animation: google.maps.Animation.DROP,
        });
    var Bristol = new google.maps.Marker({
        position: Bristol,
        map: map,
        title:"Hotel Bristol",
        animation: google.maps.Animation.DROP,
        });
    var Aeroporto = new google.maps.Marker({
        position: Aeroporto,
        map: map,
        title:"Aeroporto Regional de Maringá",
        animation: google.maps.Animation.DROP,
        });
    var Rodoviaria = new google.maps.Marker({
        position: Rodoviaria,
        map: map,
        title:"Rodoviária de Maringá",
        animation: google.maps.Animation.DROP,
        });
    var CasaEmilia = new google.maps.Marker({
        position: CasaEmilia,
        map: map,
        title: "Casa da Mãe do Noivo",
        animation: google.maps.Animation.DROP,
        });
    var CentroComercial = new google.maps.Marker({
        position: CentroComercial,
        map: map,
        title:"Centro Comercial Tiradentes",
        animation: google.maps.Animation.DROP,
        });
    var Binho = new google.maps.Marker({
        position: Binho,
        map: map,
        title:"Binho Importados",
        animation: google.maps.Animation.DROP,
        });
    var CasaUniverso = new google.maps.Marker({
        position: CasaUniverso,
        map: map,
        title:"Casa Universo",
        animation: google.maps.Animation.DROP,
        });
    var Divinita = new google.maps.Marker({
        position: Divinita,
        map: map,
        title:"Divinità Presentes",
        animation: google.maps.Animation.DROP,
        });
    var CasaNoivos = new google.maps.Marker({
        position: CasaNoivos,
        map: map,
        title:"Casa dos Noivos",
        animation: google.maps.Animation.DROP,
        });
    var Hipico = new google.maps.Marker({
        position: Hipico,
        map: map,
        title:"Clube Hípico de Maringá",
        animation: google.maps.Animation.DROP,
        });

    new google.maps.event.addListener(CasaNoivos, 'click', toggleBounce);


    function toggleBounce() {

        if (CasaNoivos.getAnimation() != null) {
        CasaNoivos.setAnimation(null);
        } else {
        CasaNoivos.setAnimation(google.maps.Animation.BOUNCE);
        }

        if (Hipico.getAnimation() != null) {
        Hipico.setAnimation(null);
        } else {
        Hipico.setAnimation(google.maps.Animation.BOUNCE);
        }
        }
  }
</script>

我确实为CasaNoivos标记添加了Bounce，但是当我尝试添加到Hipico Marker时它连接到Casanoivos并且都开始弹跳，我希望它是独立的。我已经尝试使用以下代码的InfoWindow并且失败了悲惨lol

        var infoDivinita = new google.maps.InfoWindow({
    content:'<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h2 id="firstHeading" class="firstHeading">Divinità Presentes</h2>'+
            '<div id="bodyContent">'+
            '<p><b>Telefone:</b> (44) 3226-7449' +
            '<b>Endereço:</b> Av. XV de Novembro, 351, Centro. CEP: 87013-230, Maringá-PR'+
            '<b>Site:</b> http://divinitapresentes.com.br </p>'
            '</div>'+
            '</div>';'
            })
    google.maps.event.addListener(Divinita, 'click', function() {
    infoDivinita.open(map,Divinita);
    });

非常感谢任何帮助。

Answer 1

反弹一起发生，因为它们都在同一个功能中进行了测试。您需要为单个标记调用函数，例如

    new google.maps.event.addListener(CasaNoivos, 'click', function(e) {toggleBounce(CasaNoivos)});
    new google.maps.event.addListener(Hipico, 'click', function(e) {toggleBounce(Hipico)});

    function toggleBounce(marker) {

      if (marker.getAnimation() != null) {
        marker.setAnimation(null);
      } else {
        marker.setAnimation(google.maps.Animation.BOUNCE);
      }
    }

关于InfoWindow，我发现了一些语法错误，比如';'最后。

var infoHipico = new google.maps.InfoWindow({
content:'<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h2 id="firstHeading" class="firstHeading">Hipico</h2>'+
        '<div id="bodyContent">'+
        '<p><b>Telefone:</b> (44) 3226-7449' +
        '<b>Endereço:</b> Av. XV de Novembro, 351, Centro. CEP: 87013-230, Maringá-PR'+
        '<b>Site:</b>  </p>'+
        '</div>'+
        '</div>'
        })
google.maps.event.addListener(Hipico, 'click', function() {
  closeInfoWindows();  // this function makes sure only one infowindow stays open
  infoHipico.open(map,Hipico);
});

var infoCasaNoivos = new google.maps.InfoWindow({
content:'<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h2 id="firstHeading" class="firstHeading">Casa Noivos</h2>'+
        '<div id="bodyContent">'+
        '<p><b>Telefone:</b> (44) 3226-7449' +
        '<b>Endereço:</b> Av. XV de Novembro, 351, Centro. CEP: 87013-230, Maringá-PR'+
        '<b>Site:</b>  </p>'+
        '</div>'+
        '</div>'
        })
google.maps.event.addListener(CasaNoivos, 'click', function() {
  closeInfoWindows();  // this function makes sure only one infowindow stays open
  infoCasaNoivos.open(map,CasaNoivos);
});

  function closeInfoWindows() {
    infoHipico.close();
    infoCasaNoivos.close();
  }

最后，你应该真的使用数组。它简化了一些事情，例如，如果您需要修复其中一个InfoWindow创建块。

如何在Maps API v3中将InfoWindow和Bounce Animation添加到多个标记？

1 个答案: