jQuery 1.7.2到1.8.3,谷歌地图坏了

时间:2013-05-29 14:16:16

标签: jquery maps migrate

我有以下代码来加载一些Google地图。我已将jQuery从1.7.2升级到1.8.3。它破了,但我不知道它失败了。编码如下。是否有一些jQuery LINT类型工具可用于调试这些迁移问题?

控制台没有错误。地图根本没有显示出来。 (我似乎修复了它,虽然我想了解jQuery的变化)

var mcMapPage = null;
var mcGoogleScriptStatus = "";
var mcKmlStatus = "";



$(document).on("pageshow", '#map-show-page', function() {
// adjust content height to be page height - minus footer and header
var $page = $(this)
$page.find('[data-role=content]')
.height(
  $(window).height() - 
  ( $page.find('[data-role=header]').last().height() 
  + $page.find('[data-role=footer]').last().height())
);

loadMap($(this));
})


// split into load map and a callback to process after the google data is loaded
function loadMap(page) {
mcMapPage = page;  // store this so the callback can reference
mcGoogleScriptStatus = "loaded";

// could try looking for gstatic scripts, but this breaks if google changes, so   stick with
// looking for the initial js file
var scriptNode = document.getElementsByTagName("head") [0].querySelector('script[src^="http://maps.googleapis.com"]');
if (scriptNode == null) {
    mcGoogleScriptStatus = "loading";
    var script = document.createElement("script");
    script.type="text/javascript";
    script.src = "http://maps.googleapis.com/maps/api/js?  sensor=true&callback=postLoadGS";
    document.getElementsByTagName("head")[0].appendChild(script);
} else {
    if (mcKmlStatus != "loading") {
        mcKmlStatus = "loading";
        postLoadGS();
    }
}
 }

function postLoadGS() {
mcGoogleScriptStatus = "loaded";

var mapOptions = {
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}   
var map = new google.maps.Map(mcMapPage.find('#map-div').get(0),mapOptions);
$(mcMapPage).data('map', map);

mcKmlStatus = "loading";
loadSelectedKml(mcMapPage);
}

function loadSelectedKml(page) {
// load active kml file
page = typeof page !== 'undefined' ? page : $.mobile.activePage;
var button = page.find('a.[data-role="radio-button"].ui-btn-active'),
    kmlUrl = button.attr('data-kml'),
    kmlLayer = page.data('kmlLayer');

if ( kmlLayer ) {
    // remove current layer from map
    try {
        kmlLayer.setMap()
    } catch (error) {
        // ignore it
    }
    page.removeData('kmlLayer')
}

if ( kmlUrl && kmlUrl != "") {
    var noCache = true
    if ( noCache )
    {
        var queryOperator = kmlUrl.indexOf("?") == -1 ? "?" : "&"
        kmlUrl += queryOperator + "no-cache-value=" + new Date().getTime()
    }
    kmlLayer = new google.maps.KmlLayer(kmlUrl, {'preserveViewport': false})
    kmlLayer.setMap(page.data('map'))

    page.data('kmlLayer', kmlLayer)
}
mcKmlStatus = "loaded";
}

$(document).on('click', 'a.[data-role="radio-button"]', function() {    
loadSelectedKml()
return true
})

$(document).on("click", '#map-show-page div#map-div a', function(event) {
// intercept and open with MapController using System.open_url
var targetUrl = this.href

// JQM ajax likely hijacked, if so find the real target URL
if ( $(this).data('href') != undefined) {
    targetUrl = $(this).data('href')
}

// decide if this target url is to be opened externally
var doOpen = !(targetUrl == "" || targetUrl.indexOf("http:") != 0 ||
             targetUrl.indexOf("http://127.0.0.1") == 0 ||  targetUrl.indexOf("http://localhost") == 0 );

if ( doOpen ) {
    var openUrl = "/app/Map/system_open_url?target=" + encodeURIComponent(targetUrl)
    $.get(openUrl)
}

event.preventDefault();
return false;
})

$(document).on('scrollstop', '#map-show-page', function(event) {
// if the window scrolled, scroll it back to zero
if ( $(window).scrollTop() > 1) {
    $(window).scrollTop(0);
}
})

$(document).on("pagebeforehide", '#map-show-page', function() {
mcKmlStatus = "";
})

嗯..似乎不再支持以下内容:

$(document).on('click', 'a.[data-role="radio-button"]', function() {    
   loadSelectedKml()
   return true
})

如果我将其更改为:

a[data-role="radio-button"]
它似乎工作。任何人都可以扩展这个jQuery的变化吗?这是jQuery中的一个错误,还是他们改变了选择器的工作方式?

0 个答案:

没有答案