0

アプリに Google マップを表示したいのですが、これには問題があることが多くの人にわかっています。それを克服するために、アプリがロードされたときにマップを更新して、JavaScript を使用します。

さらに、メニューが Android アプリのように少し透明に見えるように、100% に設定しました。この同じメニュー構造は、Google マップが表示されているページを除いて、アプリ内のどこでも問題なく機能します。

マップ ページで、ナビゲーション バーのメニュー ボタンを選択できず、そこから移動することができません.... フッターは引き続き機能します。

Google が画面を引き継ぐことと関係があると思ったので、div の z-index を変更しようとしましたが、うまくいきませんでした。

この考え方の理由は、マウスをメニューの上に移動すると (Chrome を使用して) 正しいリンクが表示されますが、何らかの理由で実際のタッチ/クリック イベントがキャプチャされず、結果としてアクションが実行されないためです。

参考までに、jquery-1.8.2 と jquery.mobile-1.2.0 を使用しています。

Javascript

$(function () {
    // To fix the google map display issue
    // https://forum.jquery.com/topic/google-maps-inside-jquery-mobile
    // http://stackoverflow.com/questions/3514784/best-way-to-detect-handheld-device-in-jquery
    // Web Kit Browser Version Of Code   

if (navigator.userAgent.match(/Android/) || navigator.userAgent.match(/webOS/) ||     navigator.userAgent.match(/iPhone/) || navigator.userAgent.match(/iPad/) || navigator.userAgent.match(/iPod/) || navigator.userAgent.match(/BlackBerry/)) {
    var mapheight = $(window).height() - 263;
    var mapwidth = $(window).width();
    $("#map").height(mapheight);
    $("#map").width(mapwidth);
    setTimeout("initializeeventsmap()", 150);
    setTimeout("google.maps.event.trigger(map, 'resize')", 350);
    //setTimeout("map.setZoom( map.getZoom() )", 170);
    setTimeout("showResultmapjsonp()", 250);

} else { // https://forum.jquery.com/topic/google-maps-inside-jquery-mobile
    // PC Version Of Code
    var mapheight = $(window).height();
    var mapwidth = $(window).width();
    $("#map").height(mapheight);
    $("#map").width(mapwidth);
    setTimeout("initializeeventsmap()", 150);
    setTimeout("google.maps.event.trigger(map, 'resize')", 350);
    //setTimeout("map.setZoom( map.getZoom() )", 170);
    setTimeout("showResultmapjsonp()", 250);
};

HTML

<div data-role="page" id="eventmap" data-theme="d">
    <div data-role="header" data-position="fixed" data-type="horizontal" class="ui-bar-androidtopmenubar">
        <div id="androidnavmenumain3" data-role="navbar" data-theme="d">
            <ul>
                <li> <a href="#home" data-theme="d" class="ui-bar-androidtopmenu" data-icon="home"> </a>

                </li>
                <li> <a href="#events" data-theme="d" class="ui-bar-androidtopmenu" data-icon="grid"> </a>

                </li>
                <li> <a href="#eventmap" data-theme="d" class="ui-bar-androidtopmenu" data-icon="search"> </a>

                </li>
                <li> <a href="#settings" data-theme="d" class="ui-bar-androidtopmenu" data-icon="gear"> </a>

                </li>
                <!-- <li>
                    <a href="#home" data-theme="d" data-icon="androidmore"> </a>
                </li> -->
            </ul>
        </div>
    <!-- <div id="androidnavmenu2" data-role="button" data-mini="true" data-icon="refresh"
    data-iconpos="notext" class="ui-btn-right" data-transition="fade" data-theme="d"
    style="border-width: 0px 0px 0px 0px;">Refresh Data</div> --></div>
<!--<div id="eventscontent" data-role="content" align="center"> -->
<!--<p>&nbsp;</p> -->
<div id="map" style="width:100%%; height:100%%;"></div>
<div id="eventmapcontrolsdiv1" data-role="footer" data-position="fixed"
data-type="horizontal" class="ui-grid-a ui-bar-androidbottommenubar">
    <div class="ui-block-a">
        <div id="followme" data-role="button" data-transition="fade" data-theme="d"
        data-shadow="false" class="ui-bar-androidbottommenu">Follow Me</div>
    </div>
    <div class="ui-block-b">
        <div id="centermap" data-role="button" data-transition="fade" data-theme="d"
        data-shadow="false" class="ui-bar-androidbottommenu">Center Map</div>
    </div>
</div>
4

1 に答える 1

0

回答: $(function () が混乱していたため、javascript 内の余分な showResultmapjsonp() を削除しました。

テラン

于 2013-01-02T11:42:08.713 に答える