Pageshow仅在第一次加载Google地图

Question

问题很简单;如果我显示页面“map1”，谷歌地图只加载一次。在我的网络应用程序中，我改变了latitute e longitude的值，但是地图显示的是第一个。为什么不每次都加载一个新职位呢？

$(document).on('pageshow', '#map1', function () {

    var lat = (localStorage.getItem('lat'));
    var lng = (localStorage.getItem('lng'));

    console.log(lat + ',' + lng);
    alert("!");

    $('#map_canvas2').gmap({
        'center': '' + lat_det + ',' + lng_det + '',
        'zoom': 10,
        'disableDefaultUI': true,
        'callback': function () {
            var self = this;
            self.addMarker({
                'position': this.get('map').getCenter()
            }).click(function () {
                self.openInfoWindow({
                    'content': 'Position'
                }, this);
            });
        }
    });

    map_element2 = document.getElementById("map_canvas2");

    var mapwidth2 = $(window).width();
    var mapheight2 = $(window).height();
    $("#map_canvas2").height(mapheight2);
    $("#map_canvas2").width(mapwidth2);

    google.maps.event.trigger(map_element2, 'resize');

});

Answer 1

如果我理解你的话你是以错误的方式做到的。

您的地图是在第一次触发pageshow事件时创建的，除非您手动删除它或更改当前标记位置，否则它将保留在那里。

这个问题有两种可能的解决方案。

解决方案1 ​​

在地图上，网页隐藏事件删除当前地图

$(document).on('pagehide', '#map1', function () {
    $.mobile.activePage.find('#map_canvas2').empty();
});

下次您浏览页面时会重新创建。

解决方案2

微创解决方案是将您的标记保存为全局变量并更改它（如果它不存在则创建新变量），如下所示：

function changeMarkerPosition(marker) {
    var latlng = new google.maps.LatLng(-24.397, 140.644);
    marker.setPosition(latlng);
}

Answer 2

好的，我解决了它在外部页面上加载地图的问题：

<a href="map.html" rel="external" data-ajax="false" >

在这种模式下，代码完美无缺。

希望这有助于某人。