2016-10-04 39 views
0

我想顯示在地圖中我的應用程序,但我得到「谷歌沒有定義」得到在Apache Cordova的「谷歌沒有定義」

我index.js看起來是這樣的:

$(document).on('click', '#home_button', (function() { 

     var coords = new google.maps.LatLng(-17.391919993615, -66.155978093418); 
     var opciones = { center: coords, zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP }; 
     var mapa = new google.maps.Map(document.getElementById("map"), opciones); 
     var marcador = new google.maps.Marker({ 
      position: coords, 
      map: mapa, 
      animation: google.maps.Animation.DROP 

     }) 


     getRefresh(); 
    })); 

而我的index.html頭的樣子:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> 
    <access origin="*" /> 
    <meta name="format-detection" content="telephone=no"> 
    <meta name="msapplication-tap-highlight" content="no"> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" /> 
    <link rel="stylesheet" type="text/css" href="css/index.css"> 
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">   
    <script src="../../Jquery/prettify.js"></script> 
    <script type="text/javascript" src="cordova.js"></script> 
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDGGvPKPbRdqHqS98CK8BShmF7VLBHepcQ&sensor=false"></script> 

之後,我只是顯示它在一個<div id="map">

回答

1

這適用於所有平臺。發生這種情況是因爲Google API庫尚未加載並且已被調用。按照SO thread中的建議異步加載。確保了地圖的googleapis加載首先使用它之前:

<body> 
    <div id="floating-panel"> 
     <input id="address" type="textbox" value="Sydney, NSW"> 
     <input id="submit" type="button" value="Geocode"> 
    </div> 
    <div id="map"></div> 
    <script> 
     function initMap() { 
      var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 8, 
      center: {lat: -34.397, lng: 150.644} 
      }); 

      }); 
     } 
    </script> 
    //load it first using async 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8X7wnW7veRvTnS1xGzuxDaIGuQlHMn8I&callback=initMap"> 
    </script> 
</body> 

----另一個樣本------

//load googleapis for maps first 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
//your js file that will use it 
<script type ="text/javascript" src ="SomeJScriptfile.js"></script> 

<script type ="text/javascript" src ="SomeJScriptfile.js"></script> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
相關問題