使用 jQuery Mobile 1.4.2 单击列表视图后加载 Google 地图答案

【问题标题】：Load Google Map after listview click with jQuery Mobile 1.4.2使用 jQuery Mobile 1.4.2 单击列表视图后加载 Google 地图
【发布时间】：2014-04-26 00:12:31
【问题描述】：

我正在尝试在单页 JQM 项目中显示 Google 地图。

地图需要在列表视图点击后显示以加载带有地图的新页面。

型号：

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

脚本：

// listview events
$(".address").on("click", function ()
{
    var addressId = this.id;
    var addressPage = "#address";

    addressRequest(addressPage, addressId);
});

function addressRequest(page, addressId)
{
    var $page = $(page);

    $.ajax({
        type: "GET",
        url: urlBase + "/GetAddress",
        crossDomain: false,
        beforeSend: function () { $.mobile.loading('show') },
        complete: function () { $.mobile.loading('hide') },
        data: { addressId: addressId },
        dataType: 'json',
        success: function (address)
        {
            addressBuild(page, address);
            addressLoad(page);
        },
        error: function () {
            console.log("loadList error!");
        }
    });
}

function addressBuild(page, address)
{
    var $page = $(page);

    $(".ui-content", $page).append('<p>' + address.Name + '</p>');

    var centerLatLng = new google.maps.LatLng(address.Latitude, address.Longitude);

    addressLoadMap(centerLatLng);
}

function addressLoad(page)
{
    var $page = $(page);

    $.mobile.pageContainer.pagecontainer("change", $page, { transition: "slide" });
}

function addressLoadMap(latlng)
{
    var myOptions = {
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
}

HTML：

地址页面列表视图：

    <!-- page addresses list -->
    <div data-role="page" id="addresses">

        <div data-role="header" data-position="fixed"><h1>mobile</h1></div>

        <div class="ui-content" role="main">
           <li><a href="" id="1" class="address">Company A<span class="ui-li-count">distance: 2.0 km</span></a></li>
        </div>
            <li><a href="" id="2" class="address">Company B<span class="ui-li-count">distance: 3.0 km</span></a></li>
        </div>
    </div>

地址页：

    <style>
        #map-canvas {
            width: 100%;
            height: 100%;
            padding: 0;
        }
    </style>

    <!-- page address -->
    <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>

我收到以下错误：

Uncaught TypeError: Cannot read property 'offsetWidth' of null

知道发生了什么吗？

谢谢。

【问题讨论】：

你能给个页面链接吗？
您好，谢谢，您指的是哪个页面？
包含上述代码的页面？
我没有在线，只有在我的笔记本电脑里，你还需要什么？
添加更多细节......例如一个 jsfiddle 演示。您谈论列表视图...您的代码中没有列表视图。 ajax 响应包含什么？

标签： google-maps listview jquery-mobile

【解决方案1】：

我发现了问题，我正在加载地图，容器尚未加载。

我只能在显示页面时加载地图：

$(document).on("pageshow", "#address", function ()
{
    addressLoadMap();
});

【讨论】：