Google Maps mulltiple markers, infowindow, input XML, Fluster2

До сих пор, благодаря duncan, большинство моих вопросов решены. Но я подошел к новой проблеме ... Кажется, мне нужно изучить jquery далее ...Google Maps mulltiple markers, infowindow, input XML, Fluster2

Я нашел интересный инструмент для кластеризации. Fluster2 кажется полезным, но без информации о том, как использовать его ... Ни один из примеров, которые я не смог найти в Интернете, давать объяснения, как использовать Fluster2 с JQuery ...

Ниже мой код ...

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>My map</title> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript" src="util.js"></script> 
<script type="text/javascript"> 
    google.load("maps", "3", {other_params : "sensor=false"}); 
    google.load("jquery", "1.3.2"); 

    function initialize() { 
    var myLatlng = new google.maps.LatLng(39.5, 25.1419); 
    var myOptions = { 
     zoom: 6, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    jQuery.get("genXML.php", {}, function(data) { 
     jQuery(data).find("marker").each(function() { 
      var marker = jQuery(this); 
      var latlng = new google.maps.LatLng(parseFloat(marker.attr("lat")), parseFloat(marker.attr("lng"))); 
      var shop_type = parseInt(marker.attr("type"), 10); 
      var address = marker.attr("address"); 
      var magazi = marker.attr("name"); 
      var city = marker.attr("city"); 
      var area = marker.attr("area"); 
      var tk = marker.attr("postal"); 

      switch(shop_type) { 
       case 0: 
        typos = "Something"; 
        break; 
       case 1: 
        typos = "Grocery"; 
        break; 
       case 2: 
        typos = "Coffee"; 
        break; 

       // ......... 


       case 19: 
        typos = "Bar"; 
        break; 
       case 20: 
        typos = "Club"; 
        break; 
      } 

      var markicon = "icons/0.png"; 
      if (shop_type >= 1 && shop_type <= 20) { 
       markicon = "icons/32/" + shop_type + ".png"; 
      } else { markicon = "icons/0.png"; } 

      var contentString = '<div><b style="font-size:14px">' + magazi + '</b><br/><i style="font-size:12px">' + typos + '</i><div style="float:right; margin-right:10px;"><img src="icons/b/' + shop_type + '.png" width="74" height="100" /></div><p style="font-size:12px"><b>Διεύθυνση:</b> ' + address + '<br /><b>Πόλη:</b> ' + city + '<br /><b>Περιοχή:</b> ' + area + '<br /><b>T.K.:</b> ' + tk + '</p></div>'; 
      infowindow = new google.maps.InfoWindow(); 

      var marker = new google.maps.Marker({ 
       position: latlng, 
       icon: markicon, 
       map: map 
      }); 
      google.maps.event.addListener(marker, "click", function() {   
       infowindow.setContent(contentString); 
       infowindow.open(map, this); 
      }); 
     }); 
    }); 
} 

    google.setOnLoadCallback(initialize); 
</script> 
</head> 
<body> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
</body> 
</html>

И файл XML имеет такую структуру:

<markers> 
    <marker name="Spot name 1" city="Fanari" area="Rodopi" address="Fanari" postal="67063" type="0" lat="40.96065055467095" lng="25.130796432495117"/> 
    <marker name="Spot name 2" city="Fanari" area="Rodopi" address="Fanari" postal="67063" type="0" lat="40.96065055467095" lng="25.192596532495117"/> 
</markers>

Так может кто-то помочь мне с этим? Любая помощь, идея или руководство будут очень благодарны !!!

источник

2012-06-11 Michalis Vranis

Вы смешиваете код API Карт Google 2 и API 3, который не будет работать, поскольку они несовместимы друг с другом.

например. это API 3 код:

var marker = new google.maps.Marker({ 
      position: latlng, 
      icon: markicon, 
      map: map 
     });

но это API 2 код:

var markicon = new GIcon(G_DEFAULT_ICON);

Вы определенно должны сделать все, что в API 3, как API 2 устарел в течение некоторого времени.

Сказав это, вам необходимо переместить логику, в которой находится значок, который будет использоваться внутри, где вы получите данные XML, затем создайте каждый маркер. Что-то вроде этого:

jQuery.get("genXML.php", {}, function(data) { 
    jQuery(data).find("marker").each(function() { 
     var marker = jQuery(this); 
     var latlng = new google.maps.LatLng(parseFloat(marker.attr("lat")), parseFloat(marker.attr("lng"))); 

     var shop_type = parseInt(marker.attr("type"), 10); 
     var markicon = "icons/0.png"; 

     if (shop_type >= 1 && shop_type <= 20) { 
      markicon = "icons/" & shop_type & ".png"; 
     } 

     var marker = new google.maps.Marker({ 
      position: latlng, 
      icon: markicon, 
      map: map 
     }); 
    }); 
});

источник

2012-06-11 13:39:06 duncan

Благодарю вас за ответ. Из того, что я нашел здесь, http://stackoverflow.com/questions/10884085/google-maps-api-v3-gicon-is-not-defined, нет необходимости в коде API 2 ... так что markicon переменной можно избежать и использовать код на маркере следующим образом: 'icon: url'. Но меня беспокоит 'if (shop_type == 1) url =" icons/1.png ";' –

Посмотри мой обновленный ответ – duncan

duncan, это было здорово! Спасибо, что показали мне правильный путь. –

Google Maps mulltiple markers, infowindow, input XML, Fluster2

ответ

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