1
我正在使用PHP，MongoDB，Javascript和Google Maps API V3開發基於Web的應用程序。Google Maps API V3：簡單標記羣集未顯示
我能夠通過使用json_encode轉換MongoDB數組，輕鬆地在谷歌地圖上生成和顯示標記。這是一個帶標記和infowindow的示例地圖。
然而，當我嘗試實施谷歌地圖MarkerClusterer方法，標記消失。我遵循Google Map的「A Simple MarkerClusterer Example」作爲指南。
我還試圖聲明一個全局羣集對象，並向它傳遞一個空數組，
var markerCluster = new MarkerClustrer(map, markers);
然後使用markerCluster.addMarkers(markers, true);作爲沒有運氣替代方法。
看起來很簡單，但不知何故，它不顯示標記。我也嘗試評論整個infoWindow/OnClick事件部分，所以我不認爲它與此有關。任何幫助是極大的讚賞。
PHP的MongoDB查詢：
<?php
// Connect to Mongo and set DB and Collection
try
{
$mongo = new Mongo();
$db = $mongo->selectDB('twitter');
$collection = $db->selectCollection('tweets');
}
catch(MongoConnectionException $e)
{
die("Failed to connect to Twitter Database ". $e->getMessage());
}
// The hotspots array will contain the data that will be returned
$tweets = array();
// Return a cursor of tweets from MongoDB
$cursor = $collection->find();
// Try catch for catching whether there are tweets to display
$count = 0;
try
{
$count = $cursor->count();
}
catch (MongoCursorException $e)
{
die(json_encode(array('error'=>'error message:' .$e->getMessage())));
}
// Loops through the cursor again specifically for querying all geo locations
// Unlike table display of tweets, this cursor is not limited by pages.
foreach($cursor as $id => $value)
{
$mapLocations[] = array
(
'id'=>$value['_id'],
'screen_name'=>$value['screen_name'],
'name'=>$value['name'],
'tweet'=>$value['tweet'],
'hashtags'=>$value['hashtags'],
'lat'=>$value['geo']['lat'],
'long'=>$value['geo']['long'],
'date'=>$value['date'],
'img'=>$value['img'],
'specImg'=>$value['specImg']
);
}
// var_dump($mapLocations);
?>
JavaScript函數：
function initialize()
{
// Converts MongoDB information to JSON, ready for Javascript
var tweets = <?php echo json_encode($mapLocations); ?>;
// Sets google maps options
var myOptions =
{
// Centers on Maui...
center: new google.maps.LatLng(20.80362, -156.321716),
zoom: 7,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
// Sets Marker Clusterer Options
var mcOptions =
{
gridSize: 50, maxZoom: 15
};
// Generates Google Map and applies the defined options above.
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Infowindow for displaying information for onClick event
// Content must be inside the google.maps.event function
// Otherwise the same content will be entered on all markers
var infoWindow = new google.maps.InfoWindow({});
var markerCluster = null; // Initializes markerCluster
var markers = []; //Array needed to pass to MarkerClusterer
// Loops through each tweet and draws the marker on the map.
for (var i = 0; i < tweets.length; i++)
{
var tweet = tweets[i];
if(tweet.lat != null || tweet.long != null)
{
var myLatLng = new google.maps.LatLng(tweet.lat, tweet.long);
//document.write(" Latitude: " + tweet.lat + " Longitude: " + tweet.long + " <br> ");
var marker = new google.maps.Marker({
position: myLatLng,
//icon: "markers/flag.png",
//map: map,
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i)
{
return function()
{
// Generates a table for infoWindow
var content = "<table class='popup'>";
// Check if image exits, otherwise show no image icon
if(tweets[i].specImg != null)
{
content += "<tr><th width=75 ><a href=" + tweets[i].specImg + ">";
content += "<img height=75 width=75 src=" + tweets[i].specImg + "></a>";
}
else
{
content += "<tr><th width=75><img height=75 width=75 src=images/noimage.jpg>";
}
// Concatanate screen name and tweet
// Will work on trimming information
content += "</th><td>" + tweets[i].screen_name + " says...<br>";
content += "''" + tweets[i].tweet + "''<br>";
content += "on " + tweets[i].date + "</td>";
content += "</table>";
// Zoom into marker on click
map.setZoom(15);
map.setCenter(marker.getPosition());
// Sets the infoWindow content to the marker
infoWindow.setContent(content);
infoWindow.open(map, marker);
}
})(marker, i));
}
}
var markerCluster = new MarkerClusterer(map, markers);
}
@Robbie：
的JSONned $ mapLocations成爲一個多維數組，但我簡化了$ mapLocations只存儲2D lat和長。 javascript源代碼如下所示。
var tweets = [{"lat":20.87179594,"long":-156.47718775},{"lat":20.87195633,"long":-156.47714356},{"lat":20.87138419,"long":-156.47719744},{"lat":21.3320704,"long":-157.8685716},{"lat":null,"long":null},{"lat":21.36509415,"long":-157.92824454},{"lat":21.3320825,"long":-157.8684742},{"lat":null,"long":null},{"lat":21.33673131,"long":-157.86824},{"lat":21.332507,"long":-157.86635342},{"lat":null,"long":null},{"lat":null,"long":null},{"lat":null,"long":null},{"lat":37.36520709,"long":-121.92386941},{"lat":37.2499758,"long":-121.86462506},{"lat":37.36278955,"long":-121.90521146},{"lat":null,"long":null},{"lat":37.36278955,"long":-121.90521146},{"lat":null,"long":null},{"lat":null,"long":null},{"lat":null,"long":null},{"lat":null,"long":null},{"lat":null,"long":null},{"lat":null,"long":null},{"lat":20.88944108,"long":-156.4761887},{"lat":37.36273157,"long":-121.90479984},{"lat":20.85102618,"long":-156.65936351},{"lat":20.88949978,"long":-156.4762491},{"lat":null,"long":null},{"lat":21.3320168,"long":-157.8685715},{"lat":null,"long":null},{"lat":null,"long":null},{"lat":null,"long":null}];
我懷疑的錯誤是，你正在做的'變種鳴叫=;'然後將推文視爲JavaScript數組。JSON是用於數據交換的序列化JavaScript;如果要將其轉換爲JavaScript對象，則需要''eval（）'JSON。 –
Stennie
我用這個網站[將PHP數組轉換爲Javascript]（http://stackoverflow.com/questions/5618925/convert-php-array-to-javascript-array）將PHP數組轉換爲javascript數組。似乎正確地獲取數據。我也嘗試使用eval（tweet.lat），eval（tweet.long），我仍然可以正常使用標記。但是，當我嘗試實施Marker Clusterer時，標記消失。 – bryl