个人中心
gpt4 book ai didi

javascript - jQuery Mobile 干扰 Google map v3 API

转载 作者：行者123 更新时间：2023-12-03 11:30:35 25 4
gpt4 key购买 nike

我正在 Phonegap 中构建一个应用程序，两个部分可以单独工作，但不能一起工作。

这是我尝试呈现的 HTML:

<body>
    <div id="map"></div>

    <div data-role="collapsible-set" id="storeList"> 

        <div data-role="collapsible" data-mini="true">
        <h3>Section 1</h3>
        <p>I'm the collapsible set content for section 1.</p>
        </div>

        <div data-role="collapsible" data-mini="true">
        <h3>Section 2</h3>
        <p>I'm the collapsible set content for section 2.</p>
        </div>

    </div>
</body>

当我的标题按此顺序排列时， map 会显示，但 jQuery 移动折叠下拉列表不会显示。这可能是由于尝试在 jQuery 本身之前加载 jQuery Mobile。

<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places"> </script>
    <title>Working Google Maps</title>
</head>

但是，当我翻转它并将 jQuery 放在 jQuery mobile 之前时，可折叠数据集可以工作，但 google map 不会显示。这只是一个空白区域。

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places"> </script>

重要的 CSS:

html, body {
width: 100%;
height: 100%;
padding-top: 10%;
}

#map {
width: 100%;
height: 60%;
z-index: 5
}

#storeList {
height: 30%;
width: 100%;
position: absolute; 
bottom: 0; 
left: 0;
z-index: 2
}

冗长的 JavaScript

var app = {
// Application Constructor
initialize: function() {
    this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
   // app.receivedEvent('deviceready');
   navigator.geolocation.getCurrentPosition(app.onSuccess, app.onError);
},

onSuccess: function(position){
    var longitude = position.coords.longitude;
    var latitude = position.coords.latitude;
    var latLong = new google.maps.LatLng(latitude, longitude);

    var mapOptions = {
        center: latLong,
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map"), mapOptions);

    var myLocationMarkerImage = {
        url: 'img/blue_dot.png',
        anchor: new google.maps.Point(16, 0)
    };

    var myLocationMarker = new google.maps.Marker({
          position: latLong,
          map: map,
          title: 'my location',
          icon: myLocationMarkerImage
      });
},

onError: function(error){
    alert("the code is " + error.code + ". \n" + "message: " + error.message);
},

};

app.initialize();

TIA!

最佳答案

通过查看这两篇文章，我能够弄清楚这一点:

HTML

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link href='http://fonts.googleapis.com/css?family=Lobster|Quattrocento+Sans:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
</head>
<body>
    <div data-role="page" id="map-page" data-url="map-page">
        <div data-role="header" data-theme="a">
            <h1>My App</h1>
        </div>

        <div role="main" class="ui-content" id="map">
            <!-- map loads here... -->
        </div>

        <div id="storeListLoading"><img src="img/loader.gif"></div>
        <dl id="storeList"></dl>
    </div>
</body>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/async.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/jquery.scrollintoview.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=_MY_API_KEY_&libraries=geometry,places"> </script>
</html>

CSS

#map-page { 
width: 100%; 
height: 100%; 
padding: 0; 
}

#map {
width: 100%;
height: 45%;
z-index: 10;
position: fixed;
}

JS

var app = {
// Application Constructor
initialize: function() {
    this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
   // app.receivedEvent('deviceready');
        navigator.geolocation.getCurrentPosition(app.onSuccess, app.onError);
},

onSuccess: function(position){
    var longitude = position.coords.longitude;
    var latitude = position.coords.latitude;
    var latLong = new google.maps.LatLng(latitude, longitude);

    var mapOptions = {
        center: latLong,
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true
    };

    var map = new google.maps.Map(document.getElementById("map"), mapOptions);

    var myLocationMarkerImage = {
        url: 'img/blue_dot.png',
        anchor: new google.maps.Point(16, 0)
    };

    var myLocationMarker = new google.maps.Marker({
          position: latLong,
          map: map,
          title: 'my location',
          icon: myLocationMarkerImage
      });
 },

onError: function(error){
    alert("the code is " + error.code + ". \n" + "message: " + error.message);
},

};

$( document ).on( "pageshow", "#map-page", function() {
app.initialize();
});

关于javascript - jQuery Mobile 干扰 Google map v3 API，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26744989/

25 4 0
文章推荐： javascript - Node.js 基于子域的重定向样式和资源文件夹
文章推荐： rust - 在actix-web中用作查询参数时，如何将无效的枚举变量转换为“无”
文章推荐： rust - 从AsyncRead转发到 future 0.3 mpsc::UnboundedSender 时的错误处理
文章推荐： Javascript 验证文本框中的特定字符串
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com