從數據庫中提取標記並在谷歌地圖上顯示

我有一個適用於靜態值的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();

誰能告訴我怎樣才能根據從數據庫中讀取狀態標記的位置和根據經度和緯度的不同，也有很多不同的顏色

來源

2015-07-13 sammy

究竟是什麼問題？難道你不知道如何用數據庫中的值填充'locations'變量，或者你不知道如何根據'status'創建一個標記嗎？ –

所以你需要一些服務器端從數據庫中提取數據（什麼類型？）並將其輸出到客戶端，直接輸入到您的javascript或通過ajax響應。建議你離開並考慮數據庫和服務器端代碼。例如，另見https://developers.google.com/maps/articles/phpsqlajax_v3 – duncan

Google地圖是一個客戶端API。您的標記存儲在服務器端數據庫中

請勿混淆事物。

使用標準的服務器端技術，輸出一個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>'; 
?>

有這個基本的想法幾乎無數的變化。例如，你可以retrieve the variable data via an AJAX call。

來源

2015-07-13 12:08:07

從數據庫中提取標記並在谷歌地圖上顯示

回答

相關問題