Question

我正在尝试使用谷歌API V3的infobUBBLES作为我的移动应用程序。这正是我复制https://github.com/googlemaps/js-info-bubble

的代码

这些是我的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>

当我在我的模拟器上构建并运行项目时。我确实得到了一张地图，但没有我想要的位置。它是一个随机的位置。我从js文件中得到了InfoBubble的错误：

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

没有定义。而且它还给了我一个关于缺少keyapi的警告。但正如你可以看到我确实有一把钥匙，我确实激活了它。

你能告诉我我做错了吗？

Answer 1

我认为你可能错放了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);
        });
      }

InfoBubble没有定义谷歌地图v3 api

1 个答案: