我正在尝试将来自 google 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>
当我在我的模拟器上构建和运行项目时。我确实得到了一张 map ，但没有显示我想要的位置。它是一个随机位置。我从行中的 js 文件中得到 InfoBubble 错误:
var infoBubble = new InfoBubble({
minHeight: 200,
minWidth: 200,
没有定义。它还会警告我缺少 keyapi。但正如您所看到的，我确实有一把 key ，而且我确实激活了它。
你能告诉我我做错了什么吗？
最佳答案
我认为您可能放错了 infoBubble 变量的实例化。我建议使用有关 Infowindows in Google JS Maps API 的指南.它非常简单易懂。以下是与您的代码相关的示例 fragment :
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);
});
}
关于javascript - InfoBubble 未从 google maps v3 api 定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40483757/