Fatal编程技术网
  • google-maps-api-3/
  • Google maps api 3 在custon图标上使用谷歌地图API MarkerClusterer？

Google maps api 3 在custon图标上使用谷歌地图API MarkerClusterer？

google-maps-api-3 cluster-computing

Google maps api 3 在custon图标上使用谷歌地图API MarkerClusterer？,google-maps-api-3,cluster-computing,markerclusterer,Google Maps Api 3,Cluster Computing,Markerclusterer,因此，我有一个棒球队的列表，我想映射，每个队都有一个自定义图标和文本窗口。因为我的主要缩放级别是4，所以大多数图标，特别是东北部的图标都非常拥挤 下面是部分代码，抱歉长度太长。这就是我现在知道要做的。曾尝试添加markercluster变量，但不确定如何将每个团队添加到该变量中，或者根据我遇到问题的团队创建多个集群 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-

因此，我有一个棒球队的列表，我想映射，每个队都有一个自定义图标和文本窗口。因为我的主要缩放级别是4，所以大多数图标，特别是东北部的图标都非常拥挤

下面是部分代码，抱歉长度太长。这就是我现在知道要做的。曾尝试添加markercluster变量，但不确定如何将每个团队添加到该变量中，或者根据我遇到问题的团队创建多个集群

<!DOCTYPE html>
<html>
 <head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map-canvas { height: 100% }
</style>
<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBblZOVoLgeHeWlv_zt5dR6dlQbRHMUPKo&sensor=true">
 </script>
<script type="text/javascript">

  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(39.8282, -98.5795),
      zoom: 4
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);



   var padres = 'http://s7d2.scene7.com/is/image/Fathead/lgo_mlb_san_diego_padres?layer=comp&fit=constrain&hei=50&wid=200&fmt=png-alpha&qlt=95,0&op_sharpen=1&resMode=bicub&op_usm=0.0,0.0,0,0&iccEmbed=0';
   var padresLatLng = new google.maps.LatLng(32.7073, -117.1566);
   var padresmarker = new google.maps.Marker({
  position: padresLatLng,
  map: map,
  icon: padres,
  title: 'San Diego Padres'
     }); 
var padresString =  '<div id="content">'+
  '<div id="siteNotice">'+
  '</div>'+
  '<h1 id="firstHeading" class="firstHeading">San Diego Padres</h1>'+
  '<div id="bodyContent">'+
  '</div>'+
  '</div>';
var padreswindow= new google.maps.InfoWindow({
  content: padresString
 });
google.maps.event.addListener(padresmarker, 'click', function() {
padreswindow.open(map, padresmarker);
 });

    var dodgers = 'http://i.cdn.turner.com/si/.element/img/4.0/global/baseball/mlb/logos/dodgers_50.png';
   var dodgersLatLng = new google.maps.LatLng(34.0736, -118.2400);
   var dodgersmarker = new google.maps.Marker({
  position: dodgersLatLng,
  map: map,
  icon: dodgers,
  title: 'Los Angeles Dodgers'
 }); 
var dodgersString =  '<div id="content">'+
  '<div id="siteNotice">'+
  '</div>'+
  '<h1 id="firstHeading" class="firstHeading">Los Angeles Dodgers</h1>'+
  '<div id="bodyContent">'+
  '</div>'+
  '</div>';
var dodgerswindow= new google.maps.InfoWindow({
  content: dodgersString
});
google.maps.event.addListener(dodgersmarker, 'click', function() {
dodgerswindow.open(map, dodgersmarker);
});
}
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
至少您必须包含markerclusterer.js库并添加

var mc = new MarkerClusterer(map, [dodgersmarker, padresmarker]);
在初始化函数的末尾。Marker Clusterer需要一个映射、一组标记和选项作为可选参数作为参数。

谢谢您的帮助！我看看以后能做些什么。var mc是否应包括所有标记？我希望标记以特定的缩放级别分离8/9/10您可以一次包含所有标记，或者稍后添加它们。对于标记的分离：您必须使用选项maxZoom和gridSize在var mc行中实现maxZoom或gridSize吗？是的，这是第三个可选参数，如{maxZoom:zoom，gridSize:size}以及您的缩放和大小值。问题解决了！！！！！！在代码中创建标记后放置标记选项：感谢@anto jurković的帮助