【发布时间】：2019-05-07 23:35:17
【问题描述】：
我正在开发一个 Google 地图应用程序，该应用程序将显示从 mySQL 数据库和 LatLng 坐标加载的位置。然后我根据与给定中心的距离创建标记。我有显示每个点信息的信息窗口。但我希望能够使用 Flickr 的 API 将图像加载到这些信息窗口中。
我构建了一个名为 photos.php 的 php 文件，它从一个位置获取所有照片，我对其进行了硬编码，然后显示它们。 但是，我希望这些图像显示在信息窗口上，我不知道如何将每个标记的正确 latlng 传递给 Flickr 请求。
我一直在寻找信息并进行研究，但还没有找到我能够理解的东西。
照片.php
<?php
$lat = 32.2226;
$lng = -110.9747;
$flickr ='https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=d625f32e9ed8da3da9700a47b73d0dab&lat='.$lat.'&lon='.$lng.'&format=json&nojsoncallback=1';
$data = json_decode(file_get_contents($flickr));
$photos = $data->photos->photo;
foreach ($photos as $photo) {
$url = 'https://farm'.$photo->farm.'.staticflickr.com/'.$photo->server.'/'.$photo->id.'_'.$photo->secret.'.jpg';
echo '<img src="'.$url.'">';
}
?>
来自我的 index.php 文件的代码，其中包含我的 JS 代码并从我的数据库中检索 latlng 数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>My Google Map</title>
</head>
<body>
<div id="map">
<script>
var markers;
var map;
var circle;
var radius = 16093.4 * 5; //50 miles
var center = {lat:32.2226, lng:-110.9747}
var list;
function initMap(){
markers = [];
var options = {
zoom:8,
center: center
}
map = new google.maps.Map(document.getElementById('map'), options);
getMap();
initCircle();
}
function getMap(){
clearMarkers();
var ajax = new XMLHttpRequest();
var method = "GET";
var url = "locations.php";
var asynchronous = true;
ajax.open(method, url, asynchronous);
ajax.send();
ajax.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
var data = JSON.parse(this.responseText);
for(var i = 0; i < data.length; i++){
var tempLat = parseFloat(data[i].latitude);
var tempLong = parseFloat(data[i].longitude);
var latLng = {lat:tempLat, lng:tempLong};
addMarker({coords:{lat:tempLat, lng:tempLong},
type:data[i].cache_type,
difficulty:data[i].difficulty_rating});
console.log(latLng);
}
}
}
}
//Add Marker function
function addMarker(props){
list = document.getElementById("locationsPane").getElementsByTagName("ul")[0];
var marker = new google.maps.Marker({
position: props.coords,
map:map,
});
var infoWindow = new google.maps.InfoWindow({
content:"Cache Type: " + props.type + "<br>"
+ "Difficulty: " + props.difficulty
});
marker.addListener('click', function(){
infoWindow.open(map, marker);
})
UpdateMarkers(marker);
markers.push(marker);
addList(list, marker, props.type, props.difficulty);
}
//Initiate info window by clicking side bar item
function myclick(num){
google.maps.event.trigger(markers[num], "click");
}
function addList(list, marker, type, difficulty){
if(IsInside(marker.getPosition(), circle.getCenter(), circle.getRadius())){
var li = document.createElement("li");
list.appendChild(li);
li.innerHTML =
'<a href="javascript:myclick(' + (markers.length-1) + ')">'
+ "<b>Location:</b> "+ marker.getPosition().lat().toFixed(5)
+ ", " + marker.getPosition().lng().toFixed(5)
+ '<\/a><br>';
}
}
//Make circle
function initCircle(){
circle = new google.maps.Circle({
center:{lat:32.2226, lng:-110.9747},
radius: radius,
strokeColor: "#0000ff",
strokeOpacity: 0.6,
strokeWeight: 2,
fillColor: "#0000ff",
fillOpacity: 0.2
});
circle.setMap(map);
}
function setMapOnAll(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
function clearMarkers() {
setMapOnAll(null);
}
function clearList(){
list.innerHTML = '';
}
//Get selected index from distance drop-down
function getSelectedRad(){
radius = parseFloat(document.getElementById("radius").value);
circle.setRadius(getMeters(radius));
clearList();
getMap();
}
function getSelectedType(){
var ctype = document.getElementById("cachetype").value;
}
function getSelectedDifficulty(){
var difficultyLvl = document.getElementById("difficultylevel").value;
}
//Update map and circle center
function Update(){
clearList();
var lat = parseFloat(document.getElementById("latitude").value);
var lng = parseFloat(document.getElementById("longitude").value);
map.setCenter({lat:lat, lng:lng});
circle.setCenter({lat:lat, lng:lng});
getMap();
}
//Update markers - Ensure that they are within the radius
function UpdateMarkers(marker){
if(IsInside(marker.getPosition(), circle.getCenter(), circle.getRadius())){
marker.setVisible(true);
}else{
marker.setVisible(false);
}
}
//Convert miles to meters
function getMeters(i) {
return i*1609.344;
}
//Check the distance of a marker from the center then compare to the Radius
//If the distance is less than the radius then the marker is within the bounds
function IsInside(from, to, rad){
return google.maps.geometry.spherical.computeDistanceBetween(from, to) <= rad;
}
</script>
</div>
<div id="locationsPane">
<ul></ul>
</div>
<div id="text"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQ2k7f0FjJNw9TAodJnTm93BHchk-M20E&callback=initMap">
</script>
</body>
</html>
位置数据的小样本 位置.php
[{"latitude":"32.40638805","0":"32.40638805","longitude":"-114.7141720","1":"-114.7141720","difficulty_rating":"9","2":"9","cache_type":"Multi-Cache","3":"Multi-Cache"},{"latitude":"31.93622796","0":"31.93622796","longitude":"-111.3468008","1":"-111.3468008","difficulty_rating":"9","2":"9","cache_type":"Traditional","3":"Traditional"},{"latitude":"32.79804490","0":"32.79804490","longitude":"-113.1862492","1":"-113.1862492","difficulty_rating":"7","2":"7","cache_type":"Multi-Cache","3":"Multi-Cache"},{"latitude":"36.98398611","0":"36.98398611","longitude":"-113.0198957","1":"-113.0198957","difficulty_rating":"8","2":"8","cache_type":"Multi-Cache","3":"Multi-Cache"},{"latitude":"31.57237360","0":"31.57237360","longitude":"-109.7067254","1":"-109.7067254","difficulty_rating":"9","2":"9","cache_type":"Mystery\/Puzzle","3":"Mystery\/Puzzle"},{"latitude":"32.40104817","0":"32.40104817","longitude":"-112.3002718","1":"-112.3002718","difficulty_rating":"5","2":"5","cache_type":"Multi-Cache","3":"Multi-Cache"},{"latitude":"33.40355909","0":"33.40355909","longitude":"-114.4468231","1":"-114.4468231","difficulty_rating":"1","2":"1","cache_type":"Mystery\/Puzzle","3":"Mystery\/Puzzle"},{"latitude":"33.41258752","0":"33.41258752","longitude":"-113.1261994","1":"-113.1261994","difficulty_rating":"7","2":"7","cache_type":"Multi-Cache","3":"Multi-Cache"},{"latitude":"31.48120332","0":"31.48120332","longitude":"-109.6336029","1":"-109.6336029","difficulty_rating":"4","2":"4","cache_type":"Traditional","3":"Traditional"},{"latitude":"36.65950176","0":"36.65950176","longitude":"-110.0774749","1":"-110.0774749","difficulty_rating":"2","2":"2","cache_type":"Mystery\/Puzzle","3":"Mystery\/Puzzle"},{"latitude":"33.16987671","0":"33.16987671","longitude":"-112.1256549","1":"-112.1256549","difficulty_rating":"5","2":"5","cache_type":"Multi-Cache","3":"Multi-Cache"},{"latitude":"35.22192709","0":"35.22192709","longitude":"-110.1382606","1":"-110.1382606","difficulty_rating":"5","2":"5","cache_type":"Traditional","3":"Traditional"}]
同样，此时我真正想做的就是将相应的照片添加到每个标记的信息窗口中。基本上，如何将标记中的坐标传递给 Flickr 照片搜索？
【问题讨论】：
-
您遇到了时间问题。有些函数依赖于在
getMap（initCircle之前）中调用的circle。 -
您是否愿意使用 jquery 向闪烁 API 发出 ajax 请求？
-
可能，我对 Jquery 的经验很少。我还将代码更改为在
getMap之前调用initCircle。似乎并没有什么不同。 -
更改该顺序使您的代码在圆圈内显示标记。
标签： javascript php google-maps flickr