Google Maps API Маркерные кластеры Информационное окно

Как я могу добавить info window в Карты Google marker Cluster, перечисленные ниже? Карта предназначена для кластеризации маркеров, но я хотел бы, чтобы маркеры были увеличены до ближайшего уровня, чтобы показать информационное окно.Google Maps API Маркерные кластеры Информационное окно

Любая помощь была бы замечательной! Спасибо в продвинутом режиме.

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<meta http-equiv='X-UA-Compatible' content='IE=edge'> 
</meta> 
<style> 
    #map_canvas { 
    width: 1000px; 
    height: 800px; 
    background-color:#CCC; 
    } 
    #legend { 
    font-family: Arial, sans-serif; 
    background: #fff; 
    padding: 10px; 
    margin: 10px; 
    border: 3px solid #000; 
} 
#legend img { 
vertical-align: middle; 
} 
</style> 
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script> 
    <script type="text/javascript"> 
function initialize() { 
var pos = new google.maps.LatLng(-39.431441,-71.286622); 
var myOptions = { 
    zoom: 2, 
    center: pos, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(document.getElementById('map'), myOptions); 
function createCookie(name,value,days) { 
if (days) { 
var date = new Date(); 
date.setTime(date.getTime()+(days*24*60*60*1000)); 
var expires = "; expires="+date.toGMTString(); 
} 
else var expires = ""; 
document.cookie = name+"="+value+expires+"; path=/"; 
} 
function readCookie(name) { 
var nameEQ = name + "="; 
var ca = document.cookie.split(';'); 
for(var i=0;i < ca.length;i++) { 
var c = ca[i]; 
while (c.charAt(0)==' ') c = c.substring(1,c.length); 
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); 
} 
return null; 
} 
function eraseCookie(name) { 
createCookie(name,"",-1); 
} 
map.setCenter(pos); 
var all = [ 
[37.3952,-91.5482], 
[37.212,-90.168], 
[37.3331,-90.0782] 
]; 
var gmarkers = []; 
for (var i = 0; i < all.length; i++) { 
var lat = all[i][0]; 
var lng = all[i][1]; 
var latLng = new google.maps.LatLng(lat, lng); 
var marker = new google.maps.Marker({map: map, position: latLng,}); 
gmarkers.push(marker); 
} 
var markerCluster = new MarkerClusterer(map, gmarkers); 
}; 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 
<body> 
    <div id="map" style="height:800px;width:1000px;"></div> 

    </body> 
</html>

источник

2014-01-27 user2348568

Похоже, вы спрашиваете, как добавить указатель к маркеру. Это ваш вопрос? Если так, то это ничем не отличается от того, как вы это делаете без кластера. [Пример MarkerClusterer] (http://www.geocodezip.com/v3_MW_example_map3_clustered.html). Какую информацию вы хотите ввести в infowindow? – geocodezip

Это мой пример кода для добавления InfoWindow к маркерам в MarkerClusterer

Не заметили, что в моем коде JQuery необходимо для того, предположим, мы включаем эти сценарии:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <script src="~/Scripts/jquery-1.8.2.min.js"></script> 
    <script src="~/Scripts/jquery-ui-1.8.24.js"></script> 
<meta http-equiv='X-UA-Compatible' content='IE=edge'> 
</meta>

Вы могли бы использование нижеследующий код.

Благодаря геокодице.

var info = new google.maps.InfoWindow({ 
    maxWidth: 200, 
    map: map 

}); 
/* <img src="data:image/jpeg;base64{binary data}" /> */ 


google.maps.event.addListener(marker, 'click', function() { 

    var $infoWindowContent = $("YourText); 
     info.setContent($infoWindowContent[0]); 
     info.open(map, this); 

});

Как я вижу, у вас есть цикл, где хранить текст, так что я рекомендовал бы добавить это в ваш for loop Надеюсь, что это помогает немного.

источник

2014-01-27 21:54:05 Marek

Похоже, что это может зависеть от JQuery. Имеет ли это? – geocodezip

Я использовал его в моем проекте C#, но он также должен работать в этом случае. – Marek

Использует ли ваш проект C# JQuery? – geocodezip

Google Maps API Маркерные кластеры Информационное окно

ответ

Смежные вопросы