Question

我使用Jquery Mobile 1.0和Google Maps v3加载用户位置图。通过直接URL访问时，地图加载正常，但是当从链接访问时，它会窒息并且不会显示任何内容。如果我刷新页面，地图加载正常。

这是指向模仿问题的测试版本的链接：http://stacefelder.com/stacefelder/Tests/index.html 点击“我的地图”＃39;看......没什么。点击刷新以查看地图加载。

这是地图页面标题中的脚本：

<script type="text/javascript">
    $('#basic_map').live("pageshow", function() {
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position){
                initialize(position.coords.latitude,position.coords.longitude);
            });
        }
    });
    function initialize(lat,lng) {
        var latlng = new google.maps.LatLng(lat, lng);
        var myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    }
</script>

这是地图页面正文中的html：

<div data-role="page" id="basic_map">

    <div data-role="header">
        <h1>map test 901</h1>
    </div>
    <div id="map_canvas"></div>
</div>

我还试过pagecreate代替pageshow而没有明显区别。知道我在这里失踪的是什么吗？感谢您提出的所有建议！

Answer 1

如果你从另一个页面导航到这个页面，jQM只在你的div [data-role =“page”]标签中引入JS，所以如果你的JS在你的<head>标签中被拉入，这是导致你的问题的原因。

同样是的，您应该使用pageinit而不是pageshow，如果您导航回页面等，pageshow将重新启动...如果您有多次加载页面和多个具有相同ID的页面存在问题，那么一个聪明的技巧，使用最后一个div [data-role =“page”]

jQuery("div:jqmData(role='page'):last").bind('pageinit', function(){

因此，对于无故障的答案，试试这个：

<div data-role="page" id="basic_map">
    <script type="text/javascript">
        $("div:jqmData(role='page'):last").bind('pageinit', function() {
            if(navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position){
                    initialize(position.coords.latitude,position.coords.longitude);
                });
            }
        });
        function initialize(lat,lng) {
            var latlng = new google.maps.LatLng(lat, lng);
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
        }
    </script>
    <div data-role="header">
        <h1>map test 901</h1>
    </div>
    <div id="map_canvas"></div>
</div>

Answer 2

我遇到了同样的问题，无法用JQM事件的模型修复它。

最后，我通过将rel="external"添加到链接到带有谷歌地图的页面的所有锚点来修复它。该解决方案可以停用页面转换和预加载器。

快而又脏......但它现在有效。

Answer 3

我建议改为使用pageinit事件：

来自jQuery文档：

http://jquerymobile.com/demos/1.0.1/docs/api/events.html

pageinit

在初始化页面上触发，初始化后发生。我们建议绑定到此事件而不是DOM ready（），因为无论是直接加载页面还是将内容作为Ajax导航系统的一部分拉入另一个页面，这都将起作用。

$( '#aboutPage' ).live( 'pageinit',function(event){
  alert( 'This page was just enhanced by jQuery Mobile!' );
});

Answer 4

我有类似的问题，我使用外部的js文件。

我做错了几件事：

需要使用pageinit而不是jquery document ready
在运行我的地图加载之前，我进行了类检查以查看是否<body class="map"，但它应该位于JQM的div页面级别<div data-role="page" class="page-map">，因为如果页面是通过Ajax加载的上课将无关紧要。
我需要获取正确的地图画布，因此最后我设置class="map_canvas"而不是id="map_canvas"以避免ID重复。
然后我需要通过activePage = $(event.target)了解当前的活动页面。有了这个，我可以通过$('.map_canvas', activePage)获得正确的画布。（我遇到过一次将地图加载到一些隐藏的div中）
由于我使用的是外部js文件，所有相关的js文件都需要包含在每个JQM页面中。我把它们放在所有JQM页面使用的布局文件中。

我的代码（coffeescript）：

$(document).on "pageinit", (event) ->
  activePage = $(event.target)
  return if !$(activePage).is('.page-map')

  createMap = (options) ->
    canvas = $('.map_canvas', activePage)
    canvas.css(width: '100%', height: '90%')
    map = new google.maps.Map(canvas[0], options)

  address = $('.address', activePage).text()
  geocoder = new google.maps.Geocoder()

  geocoder.geocode {address: address}, (results, status) ->
    if status == google.maps.GeocoderStatus.OK
      options =
        zoom: 14
        center: results[0].geometry.location
        mapTypeId: google.maps.MapTypeId.ROADMAP

      map = createMap(options)
      map.setCenter(results[0].geometry.location)

Answer 5

卢拉拉的惊人回应 - 谢谢你解决我的问题。我根据他的回答更改了HTML代码（class =“gmap_canvas”而不是id =“gmap_canvas”）。另外我添加了

google.maps.event.trigger（map，“resize”）;

正确显示地图。

有关详细信息，另请参见函数showMap。

在html中，我将地图的div标签更改为：

<div data-role="content">
 <div id="container" class="container">
  <div class="gmap_canvas"></div>       
 </div>
</div><!-- div content -->

我添加了一个rel =“external” - 所有锚标签的属性：

<div data-role="navbar" data-theme="b">
<ul>
<li><a id="karteLink"   href="index.html" data-icon="karte" data-transition="fade" rel="external">KARTE</a></li>
<li><a id="listeLink"   href="liste.html" data-icon="liste" data-transition="fade" rel="external">LISTE</a></li>                    
<li><a id="optionsLink" href="favoriten.html"   data-icon="options"     data-transition="fade" rel="external">OPTIONEN</a></li>
</ul>
</div><!-- /navbar   -->

我的代码（jquery）

    var activePage;

        $( '#karte' ).live( 'pageinit',function(event){
            activePage = $(event.target);
            initialize();
        });

        function initialize() {
            // prepare Geocoder   
            clearOverlays(); 
            var geocoder = new google.maps.Geocoder();
            navigator.geolocation.getCurrentPosition(function(position) {
                var myLatlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
                var myOptions = { // default map options
                    zoom: 12,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                showMap(myOptions);
                google.maps.event.trigger(map, "resize");
                findPlaces();
            });
        }


        function showMap( options ) {
            canvas = $('.gmap_canvas', activePage);
            canvas.css({width: '100%', height: '100%', position: 'relative'});
            map = new google.maps.Map(canvas[0], options);
            myLatLng = options.center;
        }

    // clear overlays function
    function clearOverlays() {
        if (markers) {
            for (i in markers) {
                markers[i].setMap(null);
            }
            markers = [];
            infos = [];
        }
    }

    // clear infos function
    function clearInfos() {
        if (infos) {
            for (i in infos) {
                if (infos[i].getMap()) {
                    infos[i].close();
                }
            }
        }
    }

    // find custom places function
    function findPlaces() {
        var cur_location = myLatLng;
        // prepare request to Places
        var request = {
            location: cur_location,
            radius: radius,
            type: [type],
            keyword: [keyword]
        };
        // send request
        service = new google.maps.places.PlacesService(map);
        service.search(request, createMarkers);
    }

// create markers (from 'findPlaces' function)
function createMarkers(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
        // if we have found something - clear map (overlays)
        //Eigene Winzer von der Datenbannk holen

        $.getJSON(urlInit, function(data){      
            $.each(data.winzer, function(restaurant, daten){
                var locationObject = new Object;
                locationObject.name = daten.name;
                locationObject.geometry = new Object;
                locationObject.geometry.location = new google.maps.LatLng(daten.latitude,daten.longitude);
                locationObject.vicinity = daten.ort;
                createMark(locationObject);
            }); 
        });

        // and create new markers by search result
        for (var i = 0; i < results.length; i++) {
            createMark(results[i]);
        }
    } else if (status == google.maps.places.PlacesServiceStatus.ZERO_RESULTS) {
        alert('Sorry, nothing is found');
    }
}

// creare single marker function
function createMark(obj) {

    // prepare new Marker object
    var mark = new google.maps.Marker({
        position: obj.geometry.location,
        map: map,
        title: obj.name,
        animation: google.maps.Animation.DROP
    });
    markers.push(mark);

    // prepare info window
    var infowindow = new google.maps.InfoWindow({
        content: '<img src="' + obj.icon + '" /><font style="color:#000;">' + obj.name + 
        '<br />Rating: ' + obj.rating + '<br />Vicinity: ' + obj.vicinity + '</font>'
    });


    // add event handler to current marker
    google.maps.event.addListener(mark, 'click', function() {
        clearInfos();
        infowindow.open(map,mark);
    });
    infos.push(infowindow);
}

Answer 6

有趣的是，我需要在从其他页面导航时使用"pageshow"而不是"pageinit"。

使用"pageinit"时，运行on函数，但绘制地图的回调函数不是。在"pageshow"中使用$( document ).on( "pageshow", "#map-page", function() {时，回调绘制地图可以通过jQuery运行得很好。

所以，虽然我更愿意使用"pageinit"，但这对我来说并不适用。

Jquery Mobile未加载Google地图（刷新时除外）

6 个答案: