InfoBubble沒有定義谷歌地圖V3 API a

我想從谷歌API V3使用infobubbles爲我的移動應用程序。這正是我複製https://github.com/googlemaps/js-info-bubble InfoBubble沒有定義谷歌地圖V3 API a

代碼，這是我的js文件

var Map = null, 
airboxObjects = {}, 
locationObjects = {}, 
lastMeasurements = {}; 


    var infoBubble = new InfoBubble({ 
    minHeight: 200, 
    minWidth: 200, 
    maxWidth: 300, 
    disableAutoPan: true 
}); 

    function getQueryVariable(key) { 
    var query = window.location.search.substring(1); 
    var vars = query.split("&"); 
    for (var i=0; i<vars.length; i++) { 
    var pair = vars[i].split("="); 
    if(pair[0] == key) { 
    // Key found, return value 
    return pair[1]; 
     } 
    } 
    // Key not found, return null 
     return null;

} .....

這是我的HTML

 <!DOCTYPE html> 
     <html> 

     <head> 
      <link rel="stylesheet" type="text/css"            href="bootstrap/css/bootstrap.min.css"> 
     <meta charset="UTF-8"> 
     <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
     <meta name="viewport" content="width=device-width, minimum-scale=1,  initial-scale=1, user-scalable=no"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">   </script> 
    <style> 
     @-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; }   @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; } 
      @-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; }     @viewport { user-zoom: fixed ; min-zoom: 100% ; } 
    </style> 

    <link rel="stylesheet" href="css/app.css"> 
    <link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less"> 

    <script type="text/javascript" src="cordova.js" id="xdkJScordova_"> </script> 
    <script type="text/javascript" src="js/init-app.js"></script> 
    <script type="text/javascript" src="xdk/init-dev.js"></script> 
    <script type="text/javascript" src="js/config.js"></script> 
    <script type="text/javascript" src="js/thresholds.js"></script> 
    <script type="text/javascript" src="js/api.js"></script> 
    <script type="text/javascript" src="js/app.js"></script> 
    <script type="text/javascript" src="js/infobubble-compiled.js"></script> 
    <script type="text/javascript" src="js/infobubble.js"></script> 


    <link rel="stylesheet" href="css/style.css"> 

    <script type="application/javascript" src="lib/jquery.min.js"></script> 
    <script type="application/javascript" src="google_maps/google_maps.js"></script> 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=123456DUMMYKEY" 
    type="text/javascript"></script> 
    <script src="js/jquery-3.1.1.min.js"></script> 
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script type="text/javascript"> 
     var script = '<script src="js/infobubble'; 
     if (document.location.search.indexOf('compiled') !== -1) { 
      script += '-compiled'; 
     } 
     script += '.js"><' + '/script>'; 
     document.write(script); 
    </script> 
</head> 

<body> 
    <div id="mainpage"> 

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

而當我建立並運行專業版ject在我的模擬器上。我確實看到了一張地圖，但沒有顯示我想要的位置。它是一個隨機的位置。我得到的錯誤，從js文件中的InfoBubble行：

 var infoBubble = new InfoBubble({ 
     minHeight: 200, 
     minWidth: 200,

是沒有定義。它也給我一個警告，說明keyapi丟失了。但正如你所看到的，我確實有一把鑰匙，而且我確實激活了它。

你能告訴我我做錯了什麼嗎？

來源

2016-11-08 ned

我想你可能錯位了infoBubble變量的實例。我建議使用關於Infowindows in Google JS Maps API的指南。它非常簡單易用。以下是與您的代碼相關的示例代碼片段：

function initMap() { 
     var uluru = {lat: -25.363, lng: 131.044}; 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 4, 
      center: uluru 
     }); 

     var contentString = '<div id="content">'+ 
      '<div id="siteNotice">'+ 
      '</div>'+ 
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+ 
      '<div id="bodyContent">'+ 
      '</div>'+ 
      '</div>'; 

     var infowindow = new google.maps.InfoWindow({ 
      content: contentString 
     }); 

     var marker = new google.maps.Marker({ 
      position: uluru, 
      map: map, 
      title: 'Uluru (Ayers Rock)' 
     }); 
     marker.addListener('click', function() { 
      infowindow.open(map, marker); 
     }); 
     }

來源

2016-11-13 11:24:39 noogui

InfoBubble沒有定義谷歌地圖V3 API a

回答

相關問題