Я работаю над приложением Google map, которое будет отображать местоположения, загруженные из базы данных mySQL, и координаты LatLng.Затем я создаю маркеры, основанные на расстоянии от данного центра.У меня есть информационные окна, которые отображают информацию о каждой точке.Но я хочу иметь возможность загружать изображения в эти информационные окна с помощью API Flickr.
Я создал php-файл с именем photos.php, который получает все фотографии из позиции, которую я жестко запрограммировал, а затем отображает их.Однако я хочу, чтобы эти изображения отображались в информационных окнах, и я не могу понять, как передать правильное значение ширины каждого маркера в запрос Flickr.
Я искал информацию и проводил исследования, но мне еще не удалось найти то, что я мог понять.
photos.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.'">';
}
?>
Код из моего индекса.php файл, который содержит мой код JS и извлекает последние данные из моей базы данных.
<!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>
Небольшая выборка данных о местоположении location.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?