使用jQuery Mobile在iPhone中使用空白谷歌地图

时间:2014-04-26 19:12:29

标签: google-maps jquery-mobile

当我从列表视图中加载单页jQuery Mobile应用程序中的页面时,我得到一张空白的谷歌地图:

Listview页面:

<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>

地址页

<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>

加载地址页面的脚本:

$(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
    });
}

我在涟漪模拟器中工作得很好,但在iPhone中它是这样的:

enter image description here

1 个答案:

答案 0 :(得分:0)

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

我不得不改变WebApi返回的模型:

public class MobileGetAddressDto
{
    public int Id { get; set; }
    public string Name { get; set; }
    public double Latitude { get; set; }
    public double Longitude { get; set; }
}

为:

public class MobileGetAddressDto
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Latitude { get; set; }
    public string Longitude { get; set; }
}

问题解决了。