0

これまでのところ、duncan のおかげで、私の疑問のほとんどが解決されました。しかし、私は新しい問題を思いつきました... jquery をさらに勉強しなければならないようです...

クラスタリング用の興味深いツールを見つけました。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>

それで、誰かがこれで私を助けることができますか？どんな助け、アイデア、またはガイドも大歓迎です!!!

4

1 に答える 1

0

Google Maps API 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 2 はしばらく非推奨になっているため、必ず API 3 ですべてを行う必要があります。

そうは言っても、使用するアイコンを囲むロジックを、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-11T13:39:06.743 に答える