谷歌地图v3不能在iPad上加载 - 按钮加载但地图只是蓝色

时间:2012-03-07 04:32:31

标签: javascript ios ipad google-maps google-maps-api-3

我正在使用Google Maps v3对网站上的地址进行地理编码,并且在所有浏览器中都可以正常工作,但显然在移动设备上除外。更具体地说,现在我只是想为IOS设备(iPad / iPhone / iPod Touch)修复它。

地图应用程序本身似乎正在加载,因为我可以看到Google徽标,使用条款链接,地图和卫星按钮,甚至是小街景图标(顺便说一下是灰色的)。

下面是iPad上地图的截图。任何人都可以指出我可能导致此问题的正确方向或如何在IOS设备上调试它吗?

iPad screenshot of GMaps v3

谢谢!


修改

以下是用于渲染地图的代码的核心部分。

function renderMap(elem, lat, lng) {
    lat = (null == lat || undefined == lat) ? -14.397 : lat;
    lng = (null == lng || undefined == lng) ? 120.644 : lng;
    var latlng = new google.maps.LatLng(lat, lng);
    var map    = new google.maps.Map(
        document.getElementById(elem.attr('id')), { 
            zoom: 11, 
            center: latlng, 
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
    );

    try {
        var marker = new google.maps.Marker({ map: map, position: latlng });
    } catch (err) {
        MAP_ERRORS.push(err);
    }
}

function initialize() {
    var msie7 = (navigator.appVersion.indexOf('MSIE 7.') == -1) 
        ? false : true;

    if (true != msie7) {
        $('#my-content-div' + ' > .gmap').each(function(index) {
            // these are hidden divs that contain these values
            var lat = $(this).parent().find('.lat').html();
            var lng = $(this).parent().find('.lng').html();
            renderMap($(this), lat, lng);
        });
    }
}
initialize();

编辑2

我想我可能刚刚发现了真正的问题。 iPad似乎正在尝试将隐藏的纬度转换为电话号码。我使用JS技巧在iPad上查看页面源,特别是纬度(我认为因为它是一个正数)Safari将其转换为链接!来源如下:

<!-- iPad source -->
<span class="hidden lat">
    <a href="tel:36.783760070801">36.783760070801</a>
</span>

工作的所有其他浏览器中,来源看起来像应该

<!-- Firefox 10.0.2 source (CORRECT) -->
<span class="hidden lat">36.783760070801</span>

有任何新想法吗?

1 个答案:

答案 0 :(得分:6)

在最终查看iPad上的页面源后,我能够将问题推断到iPad Safari转换为电话号码的隐藏纬度链接。我搜索了Stack Overflow并找到了这个:https://stackoverflow.com/a/227238/486233

<meta name="format-detection" content="telephone=no">

这就解决了。

感谢大家的帮助!