0

到目前为止，多亏了邓肯，我的大部分问题都得到了解决。但是我想出了一个新问题...看来我必须进一步研究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 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-11T13:39:06.743 回答