[英]Laravel fetch longitude and latitude from database and display markers on Google Map
[英]fetch markers from database and display on google map
我有一個Google地圖,可以很好地處理靜態值,並使用不同的顏色標記顯示不同的位置。 但是我希望使它動態並從數據庫中獲取標記的位置
數據庫結構將是這樣的
id latitude longitude status
1 -33.890542 151.274856 1
2 -33.923036 151.259052 1
3 -34.028249 151.157507 2
4 -33.80010 151.28747 1
5 -33.950198 151.259302 2
我希望狀態1的位置應該是一種顏色,狀態2的位置應該是另一種顏色。
目前我有的代碼是
var locations = [
['<h4>Bondi Beach</h4>', -33.890542, 151.274856],
['<h4>Coogee Beach</h4>', -33.923036, 151.259052],
['<h4>Cronulla Beach</h4>', -34.028249, 151.157507],
['<h4>Manly Beach</h4>', -33.80010128657071, 151.28747820854187],
['<h4>Maroubra Beach</h4>', -33.950198, 151.259302]
];
// Setup the different icons and shadows
var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/';
var icons = [
iconURLPrefix + 'red-dot.png',
iconURLPrefix + 'green-dot.png',
iconURLPrefix + 'blue-dot.png',
iconURLPrefix + 'orange-dot.png',
iconURLPrefix + 'purple-dot.png',
iconURLPrefix + 'pink-dot.png',
iconURLPrefix + 'yellow-dot.png'
]
var iconsLength = icons.length;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-37.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
panControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
var infowindow = new google.maps.InfoWindow({
maxWidth: 160
});
var markers = new Array();
var iconCounter = 0;
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: icons[iconCounter]
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
iconCounter++;
// We only have a limited number of possible icon colors, so we may have to restart the counter
if(iconCounter >= iconsLength) {
iconCounter = 0;
}
}
function autoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
for (var i = 0; i < markers.length; i++) {
bounds.extend(markers[i].position);
}
// Fit these bounds to the map
map.fitBounds(bounds);
}
autoCenter();
誰能告訴我如何根據數據庫的狀態獲取標記的位置,並根據緯度和經度的狀態為它們添加不同的顏色
Google Maps是一個客戶端API。 您的標記存儲在服務器端數據庫中
不要混淆事物。
使用標准的服務器端技術,輸出帶有您的location變量的JavaScript變量:
<?php
$locationsString = '[';
for ($i = 0; $i < count($locations); $i++) {
if ($i > 0) {
$locationsString .= ', ';
}
$locationsString .= '[' . $locations['title'] . ', ' .
$locations['lat'] . ', ' . $locations['lng'] . ']';
}
echo '<script>var locations="' . $locationsString . '";</script>';
?>
這個基本概念幾乎有無數種變化。 例如,您可以通過AJAX調用檢索變量數據 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.