Я пытаюсь получить массив широт и долгот от массивов php $ lat и $ long, которые извлекаются базой данных.
<?php
...
$lat[$latlongindex] = $results_row['latitude'];
$long[$latlongindex] = $results_row['longitude'];
echo "
<script type=\"text/javascript\">
var locations = $latlongindex;
var jslat = <?php echo json_encode($lat); ?>;
var jslong = <?php echo json_encode($long); ?>; // <----------Line 58
var map = new GMaps({
div: '#map',
lat: 39.833,
lng: -98.583,
width: '900px',
height: '500px',
zoom: 4,
zoomControl : true,
zoomControlOpt: {
style : 'SMALL',
position: 'TOP_LEFT'
},
panControl : false,
});
//------------------------------------------------ADD MARKERS--------------
for (var i = 0; i<locations; i++) {
map.addMarker({
position: new google.maps.LatLng( jslat[i], jslong[i] ),
});
}
</script>
"; // <--------------------------------Line 83
}
}
?>
Как быстрая проверка, я могу выполнить echo json_encode ($ lat) и json_encode ($ long), и они отображаются корректно, но когда я пытаюсь использовать их внутри javascript, я получаю сообщение "Notice: Array to string conversion" в строках 58 и 83. Если Я прямо указываю местоположение:
var jslat = [];
jslat[0] = $lat[0];
Он будет работать правильно, но, очевидно, просто показывает первый маркер. Таким образом, я знаю, что могу получить доступ к элементам массивов $ lat и $ long. Я чувствую, что это упрощенная ошибка, но, похоже, не может найти что-либо в стеке, что является аналогичной проблемой.
Любая помощь будет большой. Благодарю.
// MAP CODE
$qry_country_map = 'Select name, refugee, lat, lng FROM '.$table_name.' WHERE 1 AND status = 1';
$country_data_map = $wpdb->get_results($qry_country_map , ARRAY_A);
//echo "<pre>";print_r($country_data_map);exit;
$array_string = "[";
for($m=0;$m<count($country_data_map);$m++) {
$array_string .= "['".$country_data_map[$m]['name']."', '".$country_data_map[$m]['name']."','".$country_data_map[$m]['refugee']."','".$country_data_map[$m]['lat']."', '".$country_data_map[$m]['lng']."'],";
}
$array_string = substr($array_string, 0,-1);
$array_string .= "]";
?>
<style>
#map{
height: 400px;
}
a[href^="http://maps.google.com/maps"]{display:none !important}
.gmnoprint a, .gmnoprint span {
display:none;
}
.gmnoprint div {
background:none !important;
}
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map"></div>
<script type="text/javascript">
var marker_image = '<?php echo $plugin_image_url;?>';
// Define your locations: HTML content for the info window, latitude, longitude
var locations = <?php echo $array_string;?>;
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(26.3351, 17.2283),
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var styles = [
{
featureType: "landscape",
stylers: [
{ visibility: "on" },
{ color: "#FFFFFF"}
]
},
{
featureType: "water",
stylers: [
{ visibility: "on" },
{ color: "#CCCCCC"}
]
},
{
featureType: "administrative",
elementType: "geometry.fill",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "all",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
map.setOptions({styles: styles});
var infowindow = new google.maps.InfoWindow({
maxWidth: 160
});
var marker;
var markers = new Array();
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++)
{
if(locations[i][3]!='' && locations[i][4]!='' && locations[i][2]!='')
{
var scale;
if(locations[i][2]<100)
scale = locations[i][2];
else if(locations[i][2]>100 && locations[i][2]<500)
scale = locations[i][2]/25;
else if(locations[i][2]>500 && locations[i][2]<1000)
scale = locations[i][2]/60;
else if(locations[i][2]>1000 && locations[i][2]<10000)
scale = locations[i][2]/275;
else if(locations[i][2]>10000 && locations[i][2]<100000)
scale = locations[i][2]/1600;
else if(locations[i][2]>100000 && locations[i][2]<500000)
scale = locations[i][2]/7500;
else if(locations[i][2]>500000 && locations[i][2]<1000000)
scale = locations[i][2]/10500;
scale = Math.round(scale);
if(scale!=0)
{
//console.log(scale);
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][3], locations[i][4]),
map: map,
icon: {
url: marker_image,
scaledSize: new google.maps.Size(scale, scale),
size:new google.maps.Size(scale, scale)
}
});
//ADD EVENT TO SHOW INFOWINDOW
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
//marker.setIcon(new google.maps.MarkerImage('http://192.168.5.33/map-marker-hover.png'));
//marker.icon.scaledSize = new google.maps.Size(scale,scale);
//marker.icon.size = new google.maps.Size(scale,scale);
}
})(marker, i));
//ADD EVENT TO HIDE INFOWINDOW
google.maps.event.addListener(marker, 'mouseout', (function(marker, i) {
return function() {
infowindow.close(map, marker);
//marker.setIcon(new google.maps.MarkerImage('http://192.168.5.33/map-marker.png'));
//marker.icon.scaledSize = new google.maps.Size(scale,scale);
//marker.icon.size = new google.maps.Size(scale,scale);
}
})(marker, i));
}
}
}
</script>
См. Переменную с именем $ array_string, которую я создал в php, а затем просто echo в js, чтобы создать массив js, а затем я зациклился на lat и долго отображал маркеры.
я закодировал некоторые вещи для пользовательского изображения маркера и масштабирования размера маркера в зависимости от значения и эффекта при наведении курсора мыши и мыши.
Вам просто нужно скопировать этот код, чтобы внести изменения в минуту, и все готово. Дайте мне знать, если что-то пойдет не так :)