0

我正在为移动设备制作商店定位器应用程序。数据库查询运行并获取距离和 lan、lat 值等，并在页面上显示最近的商店。

然后用户可以点击“在地图上查看”以在谷歌地图上查看商店和当前位置。这是来自 ajax() 成功回调的代码的主要部分：

                success: function(result){

                var rowCount = result.name.length;
                if(rowCount <= 0){
                    $('span.locatorResults').html("There were no stores found within your specified radius.");
                }else{

                    $( '#storeLocatorMapDisplay' ).live( 'pageshow',function(event){
                        initializeMapAll(); //This initialise SHOULD be called while the map_canvas div is in the DOM. This is why we have to do hacky workaround of resizing etc.. 
                    });

                    $('span.locatorResults').html("There are " + rowCount + " results within a " + result.radius + " mile radius of your current location:<br /><br />");

                    for (var i = 0; i < rowCount; i++) {

                        var storelatlng = new google.maps.LatLng(
                            parseFloat(result.storeLat[i]),
                            parseFloat(result.storeLon[i])
                        );
                        $( '#storeLocatorMapDisplay' ).live( 'pageshow',function(event){
                            createMarkerAll(storelatlng, result.name[i], result.address[i]);
                        });
                    }
                    $( '#storeLocatorMapDisplay' ).live( 'pageshow',function(event){
                        createMarkerCurrentLocation(currentlatlng);
                    });
                }                   
            }

我的问题是，我在地图区域周围有很多灰色填充，我阅读了它，因为地图在 map_canvas div 加载到 DOM 之前被初始化。

所以我决定在加载地图页面时初始化地图和标记，但这需要很多 .live('pageshow') 事件。

我的问题是......在创建标记之前和将地图画布加载到 DOM 之前，是否有更简单的方法来初始化地图？？？请记住，标记（据我所知）必须在 ajax 请求的成功回调中生成。

谢谢你的时间 ：）

4

1 回答 1

1

以下示例完全按照您的意愿工作。标记是在 AJAX 成功函数内创建的。出于测试原因，我创建了一个包含纬度、经度的 cityList 数组。应该删除这个 cityList 数组，并且应该从 AJAX 响应数据中检索数据。

<!doctype html>
<html lang="en">
   <head>
        <title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
        <script type="text/javascript">

            var demoCenter = new google.maps.LatLng(41,-87),
                map;

            function initialize()
            {
                map = new google.maps.Map(document.getElementById('map_canvas'), {
                   zoom: 7,
                   center: demoCenter,
                   mapTypeId: google.maps.MapTypeId.ROADMAP
                 });
            }

            function addMarkers()
            {
                // perform your AJAX here. In this example the markers are loaded through the cityList array
                $.ajax({
                    type:'post',
                    url:'test.html',
                    data:'',
                    success:function(data)
                    {

                        // imagine that the data in this list
                        // will be retrieved from the AJAX response
                        // i used the cityList array just for testing
                        var cityList = [
                                ['Chicago', 41.850033, -87.6500523, 1],
                                ['Illinois', 40.797177,-89.406738, 2]
                            ],
                            marker,
                            i,
                            infowindow = new google.maps.InfoWindow();

                        for (i = 0; i < cityList.length; i++) 
                        {  
                            marker = new google.maps.Marker({
                                position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
                                map: map,
                                title: cityList[i][0]
                            });

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

            $(document).on("pageinit", "#basic-map", function() {
                initialize();
                addMarkers();
            });

        </script>
    </head>
    <body>
        <div id="basic-map" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
                <a data-rel="back">Back</a>
            </div>
            <div data-role="content">   
                <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                    <div id="map_canvas" style="height:350px;"></div>
                </div>
            </div>
        </div>      
    </body>
</html>
于 2012-08-30T10:22:39.957 回答