新的google.maps.LatLngBounds()绑定扩展和中心工作随机

new google.maps.LatLngBounds() bound extend and center working random

本文关键字:工作 随机 扩展 绑定 maps google LatLngBounds 新的      更新时间:2023-09-26

我试图在地图上放置一些标记。数据从数据库中检索并使用 JSON 循环读取。

标记

已放置,但我也尝试显示地图上的所有标记并使视图居中。这似乎是随机工作的,我刷新页面,有时它显示 3 个标记,有时它只显示我的起始 LatLng,这只是岛中间的一个随机点。如果我缩小标记就在那里。因此,这似乎是标记的 LatLng 有时不会在循环中扩展的问题。

任何帮助将不胜感激。

<script type="text/javascript">             
        $(document).ready(function(){
            var myCenter=new google.maps.LatLng(12.106058, -68.935192);
            var mapOptions = {
                mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
            bounds = new google.maps.LatLngBounds();
            bounds.extend(myCenter);
            $.getJSON('map.php',function(data){
                if(data.success == true) {
                    if(data.CData.length > 0){
                        $.each(data.CData,function(index, value){
                        CID = value.CID;
                        Active = value.Active;
                        Name = value.Name;
                        Tel = value.Tel;
                        Lng = value.Longitude;
                        Lat = value.Latitude;
                        i=0;
                        addMarker(map, i, CID, Active, Name, Tel, Lat, Lng);
                        setBounds(Lat, Lng);
                        i++;
                        });
                    }
                }
            });
            map.setCenter(bounds.getCenter());
            map.fitBounds(bounds);
        });
        function addMarker(map, i, CID, Active, Name, Tel, Lat, Lng){
            if (Active == 1){
                if (Lat != null && Lng != null){
                    //alert("loop start!");
                    var myLatLng = new google.maps.LatLng(Lat, Lng);
                    var imageUrl = 'Images/default.png';
                    var markerImage = new google.maps.MarkerImage(imageUrl);                                            
                    var marker = new google.maps.Marker({
                        position: myLatLng,
                        map: map,
                        icon: markerImage,
                        title: Name,
                        zIndex: i          
                    });
                    image = '<img src="image.php?cid='+CID+'" class="img-responsive img-thumbnail" />';
                    var content = '<div class="">'+image+'<h4>'+Name+'</h4><h4><span class="label label-danger">Tel: '+ Tel +'</span></h4></div>';
                    var infowindow = new google.maps.InfoWindow({ 
                        content: content,
                        maxWidth: 370
                    });
                    google.maps.event.addListener(marker, 'click', function (){
                        infowindow.open(map, marker);
                    });
                }
            }               
        }
        function setBounds(Lat, Lng){
            var newLatLng = new google.maps.LatLng(Lat, Lng);
            bounds.extend(newLatLng);
        }               
    </script>

获取标记数据的 ajax 调用异步发生,即它可以在调用 map.setCenter 和 map.fitBound 后完成。 您应该尝试将它们移动到addMarker函数中,或者仅在所有标记完成添加后执行,例如

$.getJSON('map.php',function(data){
    if(data.success == true) {
        if(data.CData.length > 0){
            $.each(data.CData,function(index, value){
                CID = value.CID;
                Active = value.Active;
                Name = value.Name;
                Tel = value.Tel;
                Lng = value.Longitude;
                Lat = value.Latitude;
                i=0;
                addMarker(map, i, CID, Active, Name, Tel, Lat, Lng);
                setBounds(Lat, Lng);
                i++;
            });
            map.setCenter(bounds.getCenter());
            map.fitBounds(bounds);
        }
    }
});