Маркеры API карты Google с данными в реальном времени
Сейчас у меня есть php api для аналитики в реальном времени. Эта сущность называется $resulting. Если я сделаю print_r($resulting); он возвращается, например (если только 1 пользователь в сети):
Array ( [0] => Array ( [0] => Arnhem [1] => 5.898730 [2] => 51.985104 [3] => Chrome [4] => DESKTOP [5] => / [6] => 1 ) )
Теперь, позже в том же файле, у меня есть javascript api карт Google. Имеет маркеры в виде:
var markers = [
{
coords:{lat:52.0907,lng:5.1214},
content:'<h1>Utrecht</h1>'
},
{
coords:{lat:52.0907,lng:5},
content:'<h1>Links</h1>'
},
{
coords:{lat:52.0907,lng:6},
content:'<h1>Rechts</h1>'
}
];
Пока в качестве заполнителя.
Что я хочу сделать, так это указать в разделе coords:, чтобы lat: и lng: были соответствующими значениями из $resulting.
Кроме того, я хочу иметь столько маркеров, сколько пользователей в сети.
Я перепробовал все, что мог придумать, но не могу заставить это работать. Я пробовал, например:
const results = <? php echo json_encode($resulting); ?>;
let markers = [];
for(let i = 0; i < results.length; i++) {
markers[i] = {
coords: {
lat: results[1],
lng: results[2]
}
};
}
но тогда карты больше не загружаются. Я пробовал цикл, foreach, пытаясь получить lat: и lng: для обновления значений, возвращаемых $ result, но что бы я ни делал, это просто не сработает.
Может ли кто-нибудь помочь мне и заставить это работать?
Спасибо.
редактировать: добавление файла index.php по запросу:
<!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">
<script src = "jquery.json-2.4.min.js"></script>
<title>My Google Map</title>
<style>
#map{
height: 400px;
width:400px;
}
</style>
</head>
<body>
<h1>My Google Map</h1>
<div id = "map"></div>
<?php
require_once __DIR__ . '/../google/vendor/autoload.php';
$analytics = initializeAnalytics();
function initializeAnalytics()
{
// Creates and returns the Analytics Reporting service object.
// Use the developers console and download your service account
// credentials in JSON format. Place them in this directory or
// change the key file location if necessary.
$KEY_FILE_LOCATION = __DIR__ . 'MY KEY FILE LOCATION';
// Create and configure a new client object.
$client = new Google_Client();
$client->setApplicationName("Hello Analytics Reporting");
$client->setAuthConfig($KEY_FILE_LOCATION);
$client->setScopes(['https://www.googleapis.com/auth/analytics.readonly']);
$analytics = new Google_Service_Analytics($client);
return $analytics;
}
/**
* 1.Create and Execute a Real Time Report
* An application can request real-time data by calling the get method on the Analytics service object.
* The method requires an ids parameter which specifies from which view (profile) to retrieve data.
* For example, the following code requests real-time data for view (profile) ID 56789.
*/
$optParams = array(
'dimensions' => 'rt:city, rt:longitude, rt:latitude, rt:browser, rt:deviceCategory, rt:pagePath');
try {
$resultsrealtime = $analytics->data_realtime->get(
'ga:MY GOOGLE CLIENT ID',
'rt:activeUsers',
$optParams);
// Success.
} catch (apiServiceException $e) {
// Handle API service exceptions.
$error = $e->getMessage();
}
/**
* 2. Print out the Real-Time Data
* The components of the report can be printed out as follows:
*/
$resulting = $resultsrealtime->getRows();
function test() {
if (count($resulting == false)){
return;
}
else if (count($resulting) > 0){
foreach ($resulting as $resultingTwo => $resultingThree) {
foreach ($resultingThree as $resultingFour){
echo $resultingFour.'<br />';
}
}
} else {
echo 'No visitors';
}
}
?>
<script>
// Map options
function initMap(){
var options = {
zoom:7,
center:{lat:52.0907, lng:5.1214}
}
// New map
var map = new google.maps.Map(document.getElementById('map'), options);
// Array of markers
var markers = [
{
coords:{lat:52.0907,lng:5.1214},
iconImage:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
content:'<h1>Utrecht</h1>'
},
{
coords:{lat:52.0907,lng:5},
content:'<h1>Links</h1>'
},
{
coords:{lat:52.0907,lng:6},
content:'<h1>Rechts</h1>'
}
];
// Loop through markers
for(var i = 0; i < markers.length; i++){
// add Marker
addMarker(markers[i]);
}
// Add Marker Function
function addMarker(props){
var marker = new google.maps.Marker({
position: props.coords,
map:map,
//icon:props.iconImage
});
// Check for custom icon
if (props.iconImage){
// Set icon image
marker.setIcon(props.iconImage);
}
// Check for content
if (props.content){
// Set content
// Info Window
var infoWindow = new google.maps.InfoWindow({
content:props.content
});
marker.addListener('mouseover', function(){
infoWindow.open(map, marker);
// Reset Info Window
setTimeout(function(){
infoWindow.open()
}, 500);
}, false);
}
}
}
</script>
<div id = "data"><p><?php $test = json_encode($resulting); print_r($test);?></p></div>
<script src = "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script async defer
src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBuvHNJq4R6v_62R03EVG0n8UdIzXTEiI4&callback=initMap">
</script>
</body>
</html>
Кроме того, что возвращает json_encode с двумя онлайн-пользователями:
[["Arnhem","5.898730","51.985104","Chrome","DESKTOP","/","1"],["Eindhoven","5.469722","51.441643","Chrome","MOBILE","/","1"]]
Не могли бы вы запустить console.info (результаты) в DevTools и поделиться сообщением журнала?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы также должны назначить объект карты для маркера (при условии, что ваш объект карты называется map).
for(let i = 0; i < results.length; i++) {
markers[i] = {
coords: {
lat: results[1],
lng: results[2]
},
map: map
};
}
Чтобы помочь вам определить проблему, было бы полезно увидеть остальную часть вашего кода javascript для api карты, а также массив, когда после запуска через json_encode() есть несколько пользователей. Тем не менее, попробуйте следующее:
const results = <? php echo json_encode($resulting); ?>;
for(let i = 0; i < results.length; i++) {
let marker = new google.maps.Marker({
position: {lat: results[1], lng: results[2]},
content: '<h1>' + results[0] + </h1>,
map: map
});
}
Редактировать:
У меня нет установленного Composer в каталоге, в котором я тестировал ваш код, и я мало работал с API реального времени Google, но следующий javascript будет работать с учетом результатов, которые вы указали для $resulting. Вам придется настроить вещи в зависимости от того, откуда берутся ваши пользовательские значки, но это должно быть довольно просто.
<!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">
<script src = "jquery.json-2.4.min.js"></script>
<title>My Google Map</title>
<style>
#map{
height: 400px;
width:400px;
}
</style>
</head>
<body>
<h1>My Google Map</h1>
<div id = "map"></div>
<?php $resulting = array(array("Arnhem","5.898730","51.985104","Chrome","DESKTOP","/","1"), array("Eindhoven","5.469722","51.441643","Chrome","MOBILE","/","1")); ?>
<script>
const resultingArr = <?php echo json_encode($resulting); ?>;
function initMap() {
var options = {
zoom: 7,
center: {
lat: 52.0907,
lng: 5.1214
}
}
var map = new google.maps.Map(document.getElementById('map'), options);
function mapMarkers(props) {
const marker = new google.maps.Marker({
position: props.coords,
map: map,
icon: props.iconImage
});
const infoWindow = new google.maps.InfoWindow({
content: props.content
});
marker.addListener('mouseover', function() {
infoWindow.open(map, marker);
});
marker.addListener('mouseout', function() {
infoWindow.close();
});
}
for (let i = 0; i < resultingArr.length; i++) {
mapMarkers({
coords: {
lat: parseFloat(resultingArr[i][2]),
lng: parseFloat(resultingArr[i][1])
},
content: '<h3>' + resultingArr[i][0] + '</h3>'
})
}
};
</script>
<script src = "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script async defer
src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBuvHNJq4R6v_62R03EVG0n8UdIzXTEiI4&callback=initMap">
</script>
</body>
</html>
Надеюсь это поможет!
Спасибо за ваше предложение. К сожалению, если я воспользуюсь этим кодом, карта больше не загрузится. Я добавил остальную часть кода javascript и то, что возвращает json_encode (), когда 2 пользователя находятся в сети. Спасибо за ваши старания!
Я обновил свой ответ. Предполагая, что проблема не где-то в вашем запросе api в реальном времени, что не похоже на то, что я добавил javascript, должен вам помочь.
Это сработало, спасибо вам большое! На самом деле я уже пробовал подобный цикл, но не с parseFloat. Как вы думаете, в этом и заключается фокус? Использовать parsefloat (), чтобы преобразовать его из строки (json) в число? Если проблема была в этом, то теперь я думаю об этом. Спасибо :)
не могли бы вы добавить массив после добавления
coords