Fatal编程技术网
  • google-maps/
  • Google maps 谷歌地图在jQuery移动事件触发和时间混乱与奇怪的灰色填充地图

Google maps 谷歌地图在jQuery移动事件触发和时间混乱与奇怪的灰色填充地图

google-maps cordova jquery-mobile

Google maps 谷歌地图在jQuery移动事件触发和时间混乱与奇怪的灰色填充地图,google-maps,cordova,jquery-mobile,Google Maps,Cordova,Jquery Mobile,我正在为移动设备制作商店定位器应用程序。DB查询运行并获取距离、lan、lat值等，并在页面上显示最近的存储 然后，用户可以单击“在地图上查看”在谷歌地图上查看商店和当前位置。下面是来自ajax（）成功回调的主要代码部分： success: function(result){ var rowCount = result.name.length; if(rowCount <= 0){

我正在为移动设备制作商店定位器应用程序。DB查询运行并获取距离、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);
                    });
                }                   
            }

成功：函数（结果）{
var rowCount=result.name.length；

如果（rowCount以下示例完全符合您的要求。标记在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>




带谷歌地图的jQuery手机-谷歌地图jQuery插件
var demoCenter=new google.maps.LatLng（41，-87），
地图；
函数初始化（）
{
map=new google.maps.map（document.getElementById（'map_canvas'）{
缩放：7，
中心：人口中心，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
}
函数addMarkers（）
{
//在这里执行AJAX。在本例中，标记通过cityList数组加载
$.ajax({
类型：'post'，
url:'test.html'，
数据：“”，
成功：功能（数据）
{
//假设此列表中的数据
//将从AJAX响应中检索
//我使用cityList数组只是为了测试
var cityList=[
[Chicago'，41.850033，-87.6500523,1]，
[Illinois'，40.797177，-89.406738,2]
],
标记，
我
infowindow=new google.maps.infowindow（）；
对于（i=0；i