使用jQuery Mobile在iPhone中空白谷歌地图 [英] Blank Google Map in iPhone with jQuery Mobile

问题描述

Listview页面：

$

我从ListView中加载单页jQuery Mobile应用程序中的页面时， b
$ b

 < div data-role =pageid =addresses> 
< div data-role =headerdata-position =fixed>< h1> mobile< / h1>< / div> 
< div class =ui-contentrole =main> 
< ul data-role =listview> 
< li>< a href =id =345class =address> Paris< / a>< / li> 
< li>< a href =id =456class =address>伦敦< / a>< / li> 
< / ul> 
< / div> 
< / div> 
  

地址页

 < div data-role =pageid =address> 
< div data-role =headerdata-position =fixed>< h1> mobile< / h1>< / div> 
< div class =ui-contentrole =main> 
< div id =map_canvas>< / div> 
< / div> 
< / div> 
  

加载地址页的脚本：

<$ （）;
） $（document）.on（pageshow，＃address，function（）
{
addressLoadMap（）;
}）;

函数addressLoadMap（）
{
var latitude = $（＃latitude）。val（）;
var longitude = $（＃longitude）。val（）;

var centerLatLng = new google.maps.LatLng（latitude，longitude）;

var myOptions =
{
zoom：16，
center：centerLatLng，
mapTypeId：google.maps.MapTypeId.ROADMAP，
streetViewControl：false，
mapTypeControl：false
};

var map = new google.maps.Map（document.getElementById（map_canvas），myOptions）;

var marker = new google.maps.Marker（{
position：centerLatLng，
map：map
}）;
}


我在纹波模拟器中工作正常，但在iPhone中它是这样的： / p>

解决方案

我发现这个问题，使用iPhone上的应用程序访问控制台日志消息，我发现在iPhone中，纬度和来自MVC WebApi的经度被转换为错误的双格式来构建地图：

我必须更改WebApi返回的模型：

  public class MobileGetAddressDto 
 {
 public int Id {get;组; } 
 public string Name {get;组; } 
 public double Latitude {get;组; } 
 public double Longitude {get;组; ：
 
 
 
 
 
 to： 
 
  $ b  
  public class MobileGetAddressDto 
 {
 public int Id {get;组; } 
 public string Name {get;组; } 
 public string Latitude {get;组; } 
 public string Longitude {get;组; } 
} 
  
问题解决了。 
I'm getting a blank google map when I load a page in a Single Page jQuery Mobile Application from a listview:


Listview page:
<div data-role="page" id="addresses">
    <div data-role="header" data-position="fixed"><h1>mobile</h1></div>
    <div class="ui-content" role="main">
        <ul data-role="listview">
          <li><a href="" id="345" class="address">Paris</a></li>
          <li><a href="" id="456" class="address">London</a></li>
        </ul>
    </div>
</div>
Address page
<div data-role="page" id="address">
    <div data-role="header" data-position="fixed"><h1>mobile</h1></div>
    <div class="ui-content" role="main">
        <div id="map_canvas"></div>
    </div>
 </div>
Script to load the address page:
$(document).on("pageshow", "#address", function ()
{
    addressLoadMap();
});

function addressLoadMap()
{
    var latitude = $("#latitude").val();
    var longitude = $("#longitude").val();

    var centerLatLng = new google.maps.LatLng(latitude, longitude);

    var myOptions =
        {
            zoom: 16,
            center: centerLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            streetViewControl: false,
            mapTypeControl: false
        };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var marker = new google.maps.Marker({
        position: centerLatLng,
        map: map
    });
}
I works fine in ripple simulator, but in iPhone it gets like this:

解决方案
I found the problem, using an Application on the iPhone to access the console log messages, I was able to discover that in the iPhone, the latitude and longitude coming from the MVC WebApi was converted in the wrong double format to build the map:

I had to change the model returned by the WebApi from:
public class MobileGetAddressDto
{
    public int Id { get; set; }
    public string Name { get; set; }
    public double Latitude { get; set; }
    public double Longitude { get; set; }
}
to:
public class MobileGetAddressDto
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Latitude { get; set; }
    public string Longitude { get; set; }
}
And problem solved.

                        
这篇关于使用jQuery Mobile在iPhone中空白谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！