-1
我正在使用Flickr的API。我異步加載一些圖像和相關的元數據。我有一個劇本，我做這一切，用三個AJAX調用：Google Maps API：initMap（）不是函數
$(document).ready(function() {
var latLon = {
lat: 38.736946,
lng: -9.142685
};
var numero = 10;
var clicked = 1;
$("#sq").click(function() {
clicked = 1;
});
$("#lg-sq").click(function() {
clicked = 2;
});
$("#thumb").click(function() {
clicked = 3;
});
$("#small").click(function() {
clicked = 4;
});
$("#mid").click(function() {
clicked = 5;
});
$("#apagar").click(function() {
$("#results").html('');
});
$('#pesquisar').click(function() {
$("#results").html('');
$.ajax({
url: 'https://api.flickr.com/services/rest/?method=flickr.photos.search',
dataType: 'xml',
data: {
api_key: '2fd41b49fedfd589dc265350521ab539',
tags: $("#tag").val(),
format: 'rest'
},
success: sucessHandler,
error: errorHandler
});
function sucessHandler(data) {
$("#results").html('');
var fotos = Array.prototype.slice.call($(data).find("photo"));
if ($("#numero").val() != "") {
numero = parseInt($("#numero").val());
console.log("entrou");
}
fotos.forEach(function(foto, key) {
if (key < numero) {
$.ajax({
url: 'https://api.flickr.com/services/rest/?method=flickr.photos.getSizes',
dataType: 'xml',
data: {
api_key: '2fd41b49fedfd589dc265350521ab539',
photo_id: $(foto).attr('id'),
format: 'rest'
},
success: function(dataSize) {
var farmId = $(foto).attr('farm');
var serverId = $(foto).attr('server');
var Id = $(foto).attr('id');
var secret = $(foto).attr('secret');
var src = "https://farm" + farmId + ".staticflickr.com/" + serverId + "/" + Id + "_" + secret + ".jpg";
$.ajax({
url: 'https://api.flickr.com/services/rest/?method=flickr.photos.getInfo',
dataType: 'xml',
data: {
api_key: '2fd41b49fedfd589dc265350521ab539',
photo_id: $(foto).attr('id'),
format: 'rest',
secret: secret
},
success: function(dataInfo) {
for (var i = 1; i < 6; i++) {
if (clicked == i) {
var size = dataSize.getElementsByTagName('size')[i - 1];
var title = dataInfo.getElementsByTagName('title')[0].textContent;
var owner = $(dataInfo.getElementsByTagName('owner')[0]).attr('username');
var date = $(dataInfo.getElementsByTagName('dates')[0]).attr('taken');
var local = $(dataInfo.getElementsByTagName('owner')[0]).attr('location');
if (local == "") {
local = "desconhecido";
}
var tags = $(dataInfo.getElementsByTagName('tag'));
var allTags = "";
var width = $(size).attr("width");
var height = $(size).attr("height");
var htmlText = "<div class='col-md-12 jumbotron style='display:inline-block;vertical-align:text-top'><p hidden>" + Id + "</p><img src =" + src + " width=" + width + " height=" + height + "><img class='pull-right' src='icon.png' width=50 height=50/>" +
"<p><b>título: </b>:" + title + "</p>" + "<p><b>autor: </b>" + owner + "</p>" + "<p><b>data: </b>" + date + "</p>" + "<p><b>local: </b>" + local + "</br></br>"
for (var i = 0; i < tags.length; i++) {
htmlText += "<label style='border:1px solid grey;margin-left:10px'>" + $(tags[i]).attr('raw') + "</label>";
}
htmlText += "</div>";
$('#results').append(htmlText);
/*$('#results').append("<div class='col-md-4'><img src ="+src+" width="+width+" height="+height+">");
$('#results').append("<p><b>título: </b>:" + title + "</p>" + "<p><b>autor: </b>" + owner + "</p>" + "<p><b>data: </b>" + date + "</p>" + "<p><b>local: </b>" + local);
$('#results').append("</br>");*/
}
}
},
error: function(req, status, err) {
}
});
},
error: errorSize
});
}
});
function errorSize(req, status, err) {
console.log("error size");
}
}
function errorHandler(req, status, err) {
console.log("fail");
}
});
var map;
function initMap() {
map = new google.maps.Map(
document.getElementById('map'), {
center: latLon,
zoom: 8
}
);
}
});
HTML
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="FlickrPhotosSearch.js"></script>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style type="text/css">
#sq,
#lg-sq,
#thumb,
#small,
#mid,
#ori {
width: 100%
}
input {
width: 50px;
}
#map{
width:1240;
height:300;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Escolha o tamanho das imagens (em píxeis) que quer visualizar</h2>
</div>
</div>
<div class="row">
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="sq">Square [75X75]</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="lg-sq">Large Square</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="thumb">Thumbnail</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="small">Small</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="mid">Medium</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Pesquisa de fotos</h2>
</div>
</div>
<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" id="tag">
</div>
<div class="col-lg-1">
<button type="button" class="btn btn-success" id="pesquisar">Pesquisar</button>
</div>
<div class="col-lg-1">
<button type="button" class="btn btn-alert" id="apagar">Apagar</button>
</div>
<div class="col-lg-2">
<input type="text" id="numero" class="form-control" placeholder="numero de fotos">
</div>
</div>
<hr>
<div id="map"></div>
<div class="row" id="results" style="margin-top:100px;margin-left:50px">
</div>
</div>
<script src="googleapi.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKKKmlp2uHM78D9NMhhzY-lVQmzI81Z_E&callback=initMap" async defer></script>
</body>
</html>
第二腳本
$(document.ready(function(){
var map;
var latLon = {lat:38.736946,lng:-9.142685};
function initMap() {
map = new google.maps.Map(
document.getElementById('map'),
{
center: latLon,
zoom: 8
}
);
}
});
我編寫了一個電話給initMap函數在底部，但是當我嘗試調用它時，出現錯誤：
initMapis not a function
我需要使這個功能可用，所以我可以使用前面描述的數據進行另一個AJAX調用。我怎樣才能做到這一點？
只需從第二個腳本中刪除第一行和最後一行。此外，該腳本應該在谷歌地圖API腳本之上。 – mx0