javascript 谷歌地图v3位于边界/地图的中心

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript 谷歌地图v3位于边界/地图的中心相关的知识,希望对你有一定的参考价值。

var map;
        var distanceCircle;
        var center;
        function initialize() {
            <?php
          if (isset($item_info) && count($item_info) > 0) {
            foreach ($item_info as $key => $result) {
              if ($key == 0) {
                $geo_lat = $result['latitude'][0];
                $geo_lng = $result['longtitude'][0];
          ?>

                
            center = new google.maps.LatLng(<?php echo $result['latitude'][$key]; ?>,
                <?php echo $result['longtitude'][$key]; ?>);
                

            <?php
              break;
                }
              }
              
            }
            ?>


            var mapOptions = {
                zoom: 10,
                center: center,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel: false
            };

            map = new google.maps.Map(document.getElementById('search_map_div'),
                mapOptions);
            var position, marker;
            var bounds = new google.maps.LatLngBounds();
            <?php
            if (isset($item_info) && count($item_info) > 0) {
                
              foreach ($item_info as $key => $result) {
                
            ?>
            position = new google.maps.LatLng(<?php echo $result['latitude'][$key]; ?>,
                <?php echo $result['longtitude'][$key]; ?>);
                

            marker = new MarkerWithLabel({
                position: position,
                map: map,
                icon: normal_icon,
                data_id: "search-result-" + "<?php echo $result['item_reference_id'][$key]; ?>",
              
                labelAnchor: new google.maps.Point(2, 28)
            });

            bounds.extend(position);

            places["search-result-" + "<?php echo $result['item_reference_id'][$key]; ?>"] = marker;
            google.maps.event.addListener(marker, 'click', function () {
                resetIcon();
                setIcon(this, selected_icon);
                $('.search-result').removeClass("highlight");
                scrollToResultsTop(this.data_id);
                map.setZoom(11);
            });
            
            <?php 
                    }
                    
                  }
                  
                ?>
            map.fitBounds(bounds);
                }

            

        function scrollToResultsTop(searchResultId) {
            var searchContainer = $('#' + searchResultId);
            searchContainer.addClass('highlight');
            var searchContainerTop = searchContainer.offset().top;
            var scrollTop = $(window).scrollTop();

            $('html, body').animate({
                scrollTop: searchContainerTop - 145
            }, {
                duration: 'slow',
                easing: 'swing'
            });
        }

        if (screen.width > 500) {
            initialize();

        }
        $('.search-result').click(function () {
            resetIcon();
            var dataId = $(this).attr('data_id');
            setIcon(places["search-result-" + dataId], selected_icon);
            map.setCenter(places["search-result-" + dataId].position);
            map.setZoom(12);

            $('.search-result').removeClass("highlight");
            $('.search-result-' + dataId).addClass("highlight");
        });

        $('.raty').raty({
            score: function () {
                return $(this).attr('data-score');
            },
            starHalf: "{{$iserp_data['webroot_uri']}}/static/icons/star-half.svg",
            starOff: "{{$iserp_data['webroot_uri']}}/static/icons/star.svg",
            starOn: "{{$iserp_data['webroot_uri']}}/static/icons/star-filled.svg",
            readOnly: true,
            click: function (score, evt) {
                $('#rate').val(score);
            }
        });

        //                    $('.like_button').click(function(){
        //                $('#loginModal').modal('show');
        //            });


        //window.history.pushState("petsitters", "Petsitters", "{{$iserp_data['webroot_uri']}}/petsitters/Sydney-NSW-2000-Australia");
        load_position_map();
        $('.btn-popover').popover({
            trigger: "hover focus",
            html: true
        });
        //Window scroll.
        $(window).scroll(function () {
            load_position_map();
        });

        load_position_map();

    });

    function load_position_map() {
        if ($('#search-result-container').length > 0) {
            var position = $('#search-result-container').position().top;
            var maxBottom = 0;
            if ($('#pagination-block').offset()) {
                maxBottom = $('#pagination-block').offset().top;
            };
            var scrollTop = $(window).scrollTop();
            if (scrollTop > position - 50) {
                if ((scrollTop + 500) < maxBottom) {
                    $('#search_map').removeAttr('style');
                    $('#search_map').addClass('fixed-position-map');
                    var position_now = scrollTop - position + 50;
                    $('#search_map').css('top', position_now + 'px');
                } else {
                    var position_now2 = maxBottom - 450 - position;
                    $('#search_map').css('top', position_now2 + 'px');
                }
            } else {
                $('#search_map').removeClass('fixed-position-map');
            }
        }

    }

以上是关于javascript 谷歌地图v3位于边界/地图的中心的主要内容,如果未能解决你的问题,请参考以下文章

使用markerclusterer v3获取谷歌地图范围内的标记列表

如何使用 Google Maps JavaScript API v3 在谷歌地图中获取查看区域中心的坐标

Google 地图 api V3 中的 fitbounds() 不适合边界

谷歌地图方向 V3:地图上的多个方向

如何使用谷歌地图 api v3 旋转地图方向

谷歌地图 v3 可拖动标记