Google 地图 : PHP - 点击按钮时地图标记反弹

Question

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

分享我的代码：

这是我的看法

我想要的是，当我在 Activity 中单击地图上带有经纬度的同一标记中的地图图标时，所有人都会 bounce.Same。

这是我的 href link 地图

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

Google 地图 : PHP - 点击按钮时地图标记反弹

Google map : PHP - Map marker bounce when clicking on button

google-maps

google-maps-api-3

google-maps-markers