谷歌地图集群为每个标记而不是全部地图形成

我尝试在我的gmap中粘贴集群解决方案。但是集群是为每个标记而不是所有地图形成的。我认为“var markerCluster”需要在“function addMarker”之外移除，但怎么做呢？ Screenshot 谷歌地图集群为每个标记而不是全部地图形成

<script type="text/javascript"> 
var icon = new google.maps.MarkerImage("images/home.png", 
new google.maps.Size(32, 32), new google.maps.Point(0, 0), 
new google.maps.Point(16, 32)); 
var center = null; 
var map = null; 
var currentPopup; 
var bounds = new google.maps.LatLngBounds(); 
var markerArray = []; 

function addMarker(lat, lng, info) { 

    var markerArray = [];  
    for (var i = 0; i < 10; i++) { 
    var pt = new google.maps.LatLng(lat, lng); 
    bounds.extend(pt); 
    var marker = new google.maps.Marker({ 
    position: pt, 
    icon: icon, 
    map: map 
    }); 
    markerArray.push(marker); 
    } 
    var markerCluster = new MarkerClusterer(map, markerArray); 

    var popup = new google.maps.InfoWindow({ 
    content: info, 
    maxWidth: 500, 
    maxHeight: 500, 
    }); 
    google.maps.event.addListener(marker, "click", function() { 
    if (currentPopup != null) { 
    currentPopup.close(); 
    currentPopup = null; 
    } 
    popup.open(map, marker); 
    currentPopup = popup; 
    }); 
    google.maps.event.addListener(popup, "closeclick", function() { 
    //map.panTo(center); 
    currentPopup = null; 
    }); 
    } 



function initMap() { 
map = new google.maps.Map(document.getElementById("map"), { 
center: new google.maps.LatLng(0, 0), 
zoom: 10, 
mapTypeId: google.maps.MapTypeId.ROADMAP, 
mapTypeControl: false, 
mapTypeControlOptions: { 
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR 
}, 
navigationControl: true, 
navigationControlOptions: { 
style: google.maps.NavigationControlStyle.SMALL 
} 

}); 


<?php 

$query = mysql_query("SELECT * FROM table WHERE lat !=0 && lng !=0 GROUP BY lat"); 
while ($row = mysql_fetch_array($query)){ 

$city=end(explode(',', $str_from)); 


echo ("addMarker($lat, $lon,'<div style=\"width:130px\"><b>$city</b></div>"); 
echo ("');\n"); 

} 
?> 

center = bounds.getCenter(); 
map.fitBounds(bounds); 

} 

</script> 


<div id="map"></div> 
<body onload = "initMap();"></body>

来源

2014-02-14 user3310284

像现在这样，只更新markerCluster你完成循环您的所有查询结果调用addMarker（）后：

var icon = new google.maps.MarkerImage("images/home.png", 
    new google.maps.Size(32, 32), new google.maps.Point(0, 0), 
    new google.maps.Point(16, 32)); 
var center = null; 
var map = null; 
var currentPopup; 
var bounds = new google.maps.LatLngBounds(); 
var markerArray = []; 
var markerCluster; 

function addMarker(lat, lng, info) { 
    for (var i = 0; i < 10; i++) { 
     var pt = new google.maps.LatLng(lat, lng); 
     bounds.extend(pt); 
     var marker = new google.maps.Marker({ 
      position: pt, 
      icon: icon, 
      map: map 
     }); 
     markerArray.push(marker); 
    } 

    var popup = new google.maps.InfoWindow({ 
     content: info, 
     maxWidth: 500, 
     maxHeight: 500, 
    }); 
    google.maps.event.addListener(marker, "click", function() { 
     if (currentPopup != null) { 
      currentPopup.close(); 
      currentPopup = null; 
     } 
     popup.open(map, marker); 
     currentPopup = popup; 
    }); 
    google.maps.event.addListener(popup, "closeclick", function() { 
     //map.panTo(center); 
     currentPopup = null; 
    }); 
} 



function initMap() { 
    map = new google.maps.Map(document.getElementById("map"), { 
     center: new google.maps.LatLng(0, 0), 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     mapTypeControl: false, 
     mapTypeControlOptions: { 
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR 
     }, 
     navigationControl: true, 
     navigationControlOptions: { 
      style: google.maps.NavigationControlStyle.SMALL 
     } 

    }); 


    <? php 

    $query = mysql_query("SELECT * FROM table WHERE lat !=0 && lng !=0 GROUP BY lat"); 
    while ($row = mysql_fetch_array($query)) { 

     $city = end(explode(',', $str_from)); 


     echo("addMarker($lat, $lon,'<div style=\"width:130px\"><b>$city</b></div>"); 
     echo("');\n"); 

    } ?> 

    markerCluster = new MarkerClusterer(map, markerArray); 

    center = bounds.getCenter(); 
    map.fitBounds(bounds); 

}

来源

2014-02-14 16:48:45 duncan

谢谢！它真的有用！ – user3310284

谷歌地图集群为每个标记而不是全部地图形成

回答

相关问题