谷歌地图：P​​HP - 单击按钮时的地图标记反弹

Question

坚持地图标记弹跳。我正在动态地在地图上使用标记显示多个位置。当我点击事件按钮（地图图标）时，在地图上相同的位置反弹。

分享我的代码：

这是我的观点

我想要的是什么，当我点击活动中的地图图标时，同一个标记在地图上的lat-long将会反弹。全部为。

这是我的地图

的href链接

<a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i></a>
 // here i gt latitude and longitude

Google地图脚本：

 <script>

        function initMap() {
            window.map = new google.maps.Map(document.getElementById('googleMap'), {
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            var infowindow = new google.maps.InfoWindow();
            var bounds = new google.maps.LatLngBounds();

                <?php 
                    if($listactivity !="" && count($listactivity)>0){
                    foreach($listactivity as $location){ ?>
                    var location = new google.maps.LatLng({{ $location->latitude }}, {{ $location->longitude }});
                    var marker = new google.maps.Marker({
                      position: location,
                      map: map
                    });


                bounds.extend(marker.position);
                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                    return function () {
                        infowindow.setContent(locations[i][0]);
                        infowindow.open(map, marker);
                    }
                }));

                <?php }} ?>

            map.fitBounds(bounds);

            var listener = google.maps.event.addListener(map, "idle", function () {
                if (map.getZoom() > 16) map.setZoom(16); 
                google.maps.event.removeListener(listener);
            });
        }


        </script>

我该如何动态完成。

Answer 1

我就是这样做的：

// Pushing all markers to an object with an ID, after the end of your php for loop, with the current loop variable, in this case use for cycle instead of foreach
<script>
var markers = [];
    function initMap() {
        window.map = new google.maps.Map(document.getElementById('googleMap'), {
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var infowindow = new google.maps.InfoWindow();
        var bounds = new google.maps.LatLngBounds();
            <?php 
                if($listactivity !="" && count($listactivity)>0){
                    for ($i = 0; $i < count($listactivity); $i++){ ?>
                        var currentIndex = {{ $i }}
                        var location = new google.maps.LatLng({{ $listactivity[$i]->latitude }}, {{ $listactivity[$i]->longitude }});
                        var marker = new google.maps.Marker({
                            position: location,
                            map: map
                        });
                        markers.push({id: currentIndex, marker: marker});

                        bounds.extend(marker.position);
                        google.maps.event.addListener(marker, 'click', (function (marker, i) {
                          return function () {
                             infowindow.setContent(locations[i][0]);
                             infowindow.open(map, marker);
                          }
                    }));
            <?php }} ?>

        map.fitBounds(bounds);

        var listener = google.maps.event.addListener(map, "idle", function () {
            if (map.getZoom() > 16) map.setZoom(16); 
            google.maps.event.removeListener(listener);
        });
    }

    // Setting up click event

    $('.markericon').on('click', function () {
        var markerId = $(this).attr('data-id');
        var result = $.grep(markers, function (e) {
            if (e.id == markerId) {
                return e;
            }
        });
        // Trigger marker click event, or bounce effect.
        google.maps.event.trigger(result[0].marker, 'click');
    });

    </script>



// Adding a markericon class, and storing the location's marker id in a data attribute
// e.g <a href="#" class="markericon" data-id="1">