多边形或/和信息窗口中的标记簇编号 [英] Marker cluster number in a polygon or/and infowindow

查看：16
本文介绍了多边形或/和信息窗口中的标记簇编号的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当您单击某个多边形时，您会获得带有这些多边形名称的信息窗口，可以在此信息窗口中放入此多边形内的标记数(与标记簇编号相同)或将此编号(标记簇编号)放在多边形?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><头><meta http-equiv="content-type" content="text/html; charset=utf-8"/><meta name="viewport" content="initial-scale=1.0, user-scalable=no"/><link rel="stylesheet" type="text/css" href="css2.css" media="screen"/><title>StanOnline</title><style type="text/css">HTML，正文，#map_canvas {宽度:100%；高度:100%；边距:0；填充:0；}.infowindow * {字体大小:90%；保证金:0}</风格><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"><script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"><script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"><脚本语言=JavaScript"><!--显示/隐藏 div dmenu-->功能切换(ID){var state = document.getElementById(id).style.display;如果(状态=='块'){document.getElementById(id).style.display = 'block';} 别的 {document.getElementById(id).style.display = 'none';}}<script type="text/javascript">var gmarkers = [];函数 makeLink() {} ;var bounds = new google.maps.LatLngBounds();var geoXml = null;var geoXmlDoc = null;无功映射 = 空；var myLatLng = null;var myGeoXml3Zoom = true;var sidebarHtml = "";var infowindow = null;var kmlLayer = null;varpreserveViewport = true;var 文件名 = "http://mini.hr/stanonline/mo_bck.kml";var icon = new google.maps.MarkerImage("http://localhost/projekt/7stanonline/img/punkt.gif",新 google.maps.Size(32, 32), 新 google.maps.Point(0, 0),新的 google.maps.Point(16, 32));var currentPopup;函数 addMarker(lat, lng, info) {var pt = new google.maps.LatLng(lat, lng);bounds.extend(pt);var 标记 = 新的 google.maps.Marker({位置: pt,图标:图标，//地图:地图});var popup = new google.maps.InfoWindow({内容:信息，最大宽度:200});google.maps.event.addListener(标记，点击"，函数(){如果(当前弹出窗口！= null){currentPopup.close();currentPopup = null;}弹出窗口(地图，标记)；currentPopup = 弹出窗口；});google.maps.event.addListener(popup, "closeclick", function() {currentPopup = null;});gmarkers.push(标记)；}函数 MapTypeId2UrlValue(maptype) {var urlValue = 'm';开关(地图类型){案例 google.maps.MapTypeId.HYBRID: urlValue='h';休息;案例 google.maps.MapTypeId.SATELLITE: urlValue='k';休息;案例 google.maps.MapTypeId.TERRAIN: urlValue='t';休息;默认:案例 google.maps.MapTypeId.ROADMAP: urlValue='m';休息;}返回网址值；}函数初始化(){myLatLng = 新的 google.maps.LatLng(45.345537,14.439621);//这些设置了地图的初始中心、缩放和地图类型//如果查询字符串中没有指定无功纬度 = 45.345537；无功lng = 14.439621；无功缩放 = 13;var maptype = google.maps.MapTypeId.ROADMAP;//如果 URL 的 eh 端有任何参数，它们将在 location.search 中//看起来像?marker=3"//跳过第一个字符，我们对?"不感兴趣var query = location.search.substring(1);//在每个&"处拆分其余部分给出argname=value"对列表的字符var pair = query.split("&");for (var i=0; i<body onload="初始化()"><div id="map_canvas" style="width:100%; height:100%"></div><div id="dmenu"><div id="隐藏"><a href="javascript:;"onclick="toggle('dmenu');"><img src="img/x.png"></a></div><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ODABERI KVART:<div id="侧边栏">

解决方案

最简单的方法是通过useTheData"函数中的 Polygons 进行处理，该函数在 geoxml3 处理后数据可用后运行，并将单击多边形的信息窗口中的标记数.

在处理地标数组以呈现侧边栏时，还要处理每个多边形以查看它包含多少个标记:

函数 useTheData(doc){var currentBounds = map.getBounds();if (!currentBounds) currentBounds=new google.maps.LatLngBounds();//地理数据处理在这里，使用 doc 对象的 JSON 属性sidebarHtml = '<table><tr><td><a href="javascript:showAll();">显示全部</a></td></tr>';geoXmlDoc = doc[0];for (var i = 0; i < geoXmlDoc.placemarks.length; i++) {var placemark = geoXmlDoc.placemarks[i];if (placemark.polygon) {//处理多边形//多边形高亮var kmlStrokeColor = kmlColor(placemark.style.color);var kmlFillColor = kmlColor(placemark.style.fillcolor);var normalStyle = {strokeColor: kmlStrokeColor.color,strokeWeight: placemark.style.width,strokeOpacity: kmlStrokeColor.opacity,填充颜​​色:kmlFillColor.color，填充不透明度:kmlFillColor.opacity};placemark.polygon.normalStyle = normalStyle;highlightPoly(placemark.polygon, i);//新代码var标记InPoly = 0;对于(var mrkr=0；mrkr

将标记数量添加到多边形信息窗口的函数:

function clickablePolygon(placemark, info) {google.maps.event.addListener(placemark.polygon，点击"，功能(e){如果 (e && e.latLng) {infowindow.setPosition(e.latLng);} 别的 {infowindow.setPosition(placemark.polygon.bounds.getCenter());}infowindow.setContent('<div class="geoxml3_infowindow"><h3>' + placemark.name +'</h3><div>'+ 信息 + '</div></div>');infowindow.open(地图)；});}

工作概念验证

When you click on some polygon you got infowindow with the name of these polygon, is possible to put in this infowindow number of markers inside this polygon (same like marker cluster number) or to put this number (marker cluster number) on the polygon?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css2.css" media="screen" />
    <title>StanOnline</title>

<style type="text/css">
html, body, #map_canvas {
width:   100%;
height:  100%;
margin:  0;
padding: 0;
} 
.infowindow * {font-size: 90%; margin: 0}
</style>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js">
    </script>
    <script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js">
    </script>
    <script language="JavaScript">
<!--Show / Hide div dmenu-->
 function toggle(id) {
    var state = document.getElementById(id).style.display;
        if (state == 'block') {
            document.getElementById(id).style.display = 'block';
        } else {
            document.getElementById(id).style.display = 'none';
        }
    } 
</script>


    <script type="text/javascript">
var gmarkers = [];
function makeLink() {} ;
var bounds = new google.maps.LatLngBounds();
var geoXml = null;
var geoXmlDoc = null;
var map = null;
var myLatLng = null;
var myGeoXml3Zoom = true;
var sidebarHtml = "";
var infowindow = null;
var kmlLayer = null;
var preserveViewport = true;
var filename = "http://mini.hr/stanonline/mo_bck.kml";
var icon = new    google.maps.MarkerImage("http://localhost/projekt/7stanonline/img/punkt.gif",
new google.maps.Size(32, 32), new google.maps.Point(0, 0),
new google.maps.Point(16, 32));
var currentPopup;

function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);

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

var popup = new google.maps.InfoWindow({
    content: info,
    maxWidth: 200
});

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() {
    currentPopup = null;
});

gmarkers.push(marker);

 }



 function MapTypeId2UrlValue(maptype) {
   var urlValue = 'm';
   switch(maptype){
   case google.maps.MapTypeId.HYBRID:    urlValue='h';
                    break;
  case google.maps.MapTypeId.SATELLITE: urlValue='k';
                    break;
  case google.maps.MapTypeId.TERRAIN:   urlValue='t';
                    break;
  default:
  case google.maps.MapTypeId.ROADMAP:   urlValue='m';
                    break;
}
return urlValue;
 }


function initialize() {
    myLatLng = new google.maps.LatLng(45.345537,14.439621);
  // these set the initial center, zoom and maptype for the map 
  // if it is not specified in the query string
  var lat = 45.345537;
  var lng = 14.439621;
  var zoom = 13;
  var maptype = google.maps.MapTypeId.ROADMAP;




  // If there are any parameters at eh end of the URL, they will be in  location.search
  // looking something like  "?marker=3"

  // skip the first character, we are not interested in the "?"
  var query = location.search.substring(1);

  // split the rest at each "&" character to give a list of  "argname=value"  pairs
  var pairs = query.split("&");
  for (var i=0; i<pairs.length; i++) {
    // break each pair at the first "=" to obtain the argname and value
var pos = pairs[i].indexOf("=");
var argname = pairs[i].substring(0,pos).toLowerCase();
var value = pairs[i].substring(pos+1).toLowerCase();

    // process each possible argname  -  use unescape() if theres any chance of spaces
    if (argname == "id") {id = unescape(value);}
    if (argname == "filename") {filename = unescape(value);}

    if (argname == "lat") {lat = parseFloat(value);}
    if (argname == "lng") {lng = parseFloat(value);}
    if (argname == "zoom") {
  zoom = parseInt(value);
  myGeoXml3Zoom = false;
}
    if (argname == "type") {
// from the v3 documentation 8/24/2010
// HYBRID This map type displays a transparent layer of major streets on satellite images. 
// ROADMAP This map type displays a normal street map. 
// SATELLITE This map type displays satellite images. 
// TERRAIN This map type displays maps with physical features such as terrain and vegetation. 
      if (value == "m") {maptype = google.maps.MapTypeId.ROADMAP;}
      if (value == "k") {maptype = google.maps.MapTypeId.SATELLITE;}
      if (value == "h") {maptype = google.maps.MapTypeId.HYBRID;}
      if (value == "t") {maptype = google.maps.MapTypeId.TERRAIN;}

    }
  }
  if (!isNaN(lat) && !isNaN(lng)) {
    myLatLng = new google.maps.LatLng(lat, lng);
  }
            var myOptions = {
                zoom: zoom,
                center: myLatLng,
                // zoom: 5,
                // center: myLatlng,
                mapTypeId: maptype
            };
            map = new google.maps.Map(document.getElementById("map_canvas"),
                  myOptions);
            infowindow = new google.maps.InfoWindow({});

 geoXml = new geoXML3.parser({
                map: map,
                infoWindow: infowindow,
                singleInfoWindow: true,
        zoom: myGeoXml3Zoom,

                afterParse: useTheData
            });

            geoXml.parse(filename);
    google.maps.event.addListener(map, "bounds_changed", makeSidebar);
    google.maps.event.addListener(map, "center_changed", makeSidebar);
    google.maps.event.addListener(map, "zoom_changed", makeSidebar);
  // Make the link the first time when the page opens
  makeLink();

  // Make the link again whenever the map changes
  google.maps.event.addListener(map, 'maptypeid_changed', makeLink);
  google.maps.event.addListener(map, 'center_changed', makeLink);
  google.maps.event.addListener(map, 'bounds_changed', makeLink);
  google.maps.event.addListener(map, 'zoom_changed', makeLink);
  //php addmarkers
    addMarker(45.374632, 14.425697,'<b>93 Feet East</b><br/>150 Brick Lane,  London  E1 6RU&lt;br/&gt;7 Dec 2010 : Jenny &amp; Johnny&lt;br/&gt;');
addMarker(45.374632, 14.425697,'<b>93 Feet East</b><br/>150 Brick Lane, London  E1 6RU&lt;br/&gt;7 Dec 2010 : Jenny &amp; Johnny&lt;br/&gt;');
addMarker(45.348674, 14.386749,'<b>Adelphi Theatre</b><br/>The Strand, London  WC2E 7NA&lt;br/&gt;11 Oct 2010 : Love Never Dies');
addMarker(45.35051, 14.351883,'<b>Adelphi Theatre</b><br/>The Strand, London  WC2E 7NA&lt;br/&gt;11 Oct 2010 : Love Never Dies');
addMarker(45.319618, 14.501915,'<b>Albany, The</b><br/>240 Gt. Portland Street, London  W1W 5QU');
addMarker(45.339893, 14.475479,'<b>Aldwych Theatre</b><br/>Aldwych, London  WC2B 4DF&lt;br/&gt;11 Oct 2010 : Dirty Dancing');
addMarker(45.343513, 14.436684,'<b>Alexandra Palace</b><br/>Wood Green, London  N22&lt;br/&gt;30 Oct 2010 : Lynx All-Nighter');
addMarker(45.330736, 14.434211,'<b>Stan F.La Guardia 10</b><br/>Najbolji stan na svijetu');
addMarker(45.385431, 14.357071,'<b>sdas</b><br/>dfsada');

  };

function kmlPgClick(pm) {
if (geoXml.docs[0].placemarks[pm].polygon.getMap()) {
  google.maps.event.trigger(geoXmlDoc.placemarks[pm].polygon,"click");
} else {
  geoXmlDoc.placemarks[pm].polygon.setMap(map);
  google.maps.event.trigger(geoXmlDoc.placemarks[pm].polygon,"click");
}
}
function kmlPlClick(pm) {
if (geoXml.docs[0].placemarks[pm].polyline.getMap()) {
   google.maps.event.trigger(geoXmlDoc.placemarks[pm].polyline,"click");
} else {
   geoXmlDoc.placemarks[pm].polyline.setMap(map);
   google.maps.event.trigger(geoXmlDoc.placemarks[pm].polyline,"click");
}
}

function kmlShowPlacemark(pm) {
if (geoXmlDoc.placemarks[pm].polygon) {
  map.fitBounds(geoXmlDoc.placemarks[pm].polygon.bounds);
//show only markers in polygon I zoomed to
for (var i=0;i<gmarkers.length;i++) {
  if   (google.maps.geometry.poly.containsLocation(gmarkers[i].getPosition(),geoXmlDoc.placemarks[pm].polygon)) {
     gmarkers[i].setMap(map);
  } else {
     gmarkers[i].setMap(null);
  }
 }

 } 


 for (var i=0;i<geoXmlDoc.placemarks.length;i++) {
 var placemark = geoXmlDoc.placemarks[i];
 if (i == pm) {
   if (placemark.polygon) placemark.polygon.setMap(null);
   if (placemark.polyline) placemark.polyline.setMap(map);

 } else {
   if (placemark.polygon) placemark.polygon.setMap(map);
   if (placemark.polyline) placemark.polyline.setMap(null);
   }
}
}

function kmlColor (kmlIn) {
var kmlColor = {};
if (kmlIn) {
aa = kmlIn.substr(0,2);
bb = kmlIn.substr(2,2);
gg = kmlIn.substr(4,2);
rr = kmlIn.substr(6,2);
kmlColor.color = "#" + rr + gg + bb;
kmlColor.opacity = parseInt(aa,16)/256;
 } else {
// defaults
kmlColor.color = randomColor();
kmlColor.opacity = 0.45;
}
return kmlColor;
}

function randomColor(){ 
var color="#";
var colorNum = Math.random()*8388607.0;  // 8388607 = Math.pow(2,23)-1
var colorStr = colorNum.toString(16);
color += colorStr.substring(0,colorStr.indexOf('.'));
return color;
};

 var highlightOptions = {fillColor: "#b9b8a2", strokeColor: "#000000", fillOpacity: 0.4, strokeWidth: 10};
var highlightLineOptions = {strokeColor: "#000000", strokeWidth: 80};
function kmlHighlightPoly(pm) {
 for (var i=0;i<geoXmlDoc.placemarks.length;i++) {
 var placemark = geoXmlDoc.placemarks[i];
 if (i == pm) {
   if (placemark.polygon) placemark.polygon.setOptions(highlightOptions);
   if (placemark.polyline) placemark.polyline.setOptions(highlightLineOptions);
 } else {
   if (placemark.polygon) placemark.polygon.setOptions(placemark.polygon.normalStyle);
   if (placemark.polyline)   placemark.polyline.setOptions(placemark.polyline.normalStyle);
 }
 }
 }
function kmlUnHighlightPoly(pm) {
 for (var i=0;i<geoXmlDoc.placemarks.length;i++) {
 if (i == pm) {
   var placemark = geoXmlDoc.placemarks[i];
   if (placemark.polygon) placemark.polygon.setOptions(placemark.polygon.normalStyle);
   if (placemark.polyline) placemark.polyline.setOptions(placemark.polyline.normalStyle);
 }
 }
 }


function showAll() {

top.location="test2.php";
map.fitBounds(geoXmlDoc.bounds); //show all bounds
map.setZoom(13);



//marker.setMap(null); 
for (var i=0;i<geoXmlDoc.placemarks.length;i++) {
 var placemark = geoXmlDoc.placemarks[i];
 if (placemark.polygon) placemark.polygon.setMap(map);
 if (placemark.polyline) placemark.polyline.setMap(map);
 }
}

function highlightPoly(poly, polynum) {
//    poly.setOptions({fillColor: "#0000FF", strokeColor: "#0000FF", fillOpacity: 0.3}) ;
  google.maps.event.addListener(poly,"mouseover",function() {
   var rowElem = document.getElementById('row'+polynum);
if (rowElem) rowElem.style.backgroundColor = "#b9b8a2"; //ovo je boja u sidebar-u
if (poly instanceof google.maps.Polygon) {
  poly.setOptions(highlightOptions);
} else if (poly instanceof google.maps.Polyline) {
  poly.setOptions(highlightLineOptions);
}
 });
google.maps.event.addListener(poly,"mouseout",function() {
var rowElem = document.getElementById('row'+polynum);
if (rowElem) rowElem.style.backgroundColor = ""; //pozadina nakon mouserover-a u sidebar-u
poly.setOptions(poly.normalStyle);
});
}  

// == rebuilds the sidebar to match the markers currently displayed ==
function makeSidebarPolygonEntry(i) {
var name = geoXmlDoc.placemarks[i].name;
 if (!name  || (name.length == 0)) name = "polygon #"+i;
// alert(name);
sidebarHtml += '<tr id="row'+i+'"><td onmouseover="kmlHighlightPoly('+i+');"  onmouseout="kmlUnHighlightPoly('+i+');"><a    href="javascript:kmlPgClick('+i+');">'+name+'</a> - <a  href="javascript:kmlShowPlacemark('+i+');">odaberi</a></td></tr>';

}
function makeSidebarPolylineEntry(i) {
var name = geoXmlDoc.placemarks[i].name;
if (!name  || (name.length == 0)) name = "polyline #"+i;
// alert(name);
sidebarHtml += '<tr id="row'+i+'"><td onmouseover="kmlHighlightPoly('+i+');"   onmouseout="kmlUnHighlightPoly('+i+');"><a  href="javascript:kmlPlClick('+i+');">'+name+'</a> - <a href="javascript:kmlShowPlacemark('+i+');">show</a></td></tr>';

}


function makeSidebar() {
 sidebarHtml = '<table><tr><td><a href="javascript:showAll();">Prika&#382i sve     kvartove</a></td></tr>';
  var currentBounds = map.getBounds();
 // if bounds not yet available, just use the empty bounds object;
if (!currentBounds) currentBounds=new google.maps.LatLngBounds();
if (geoXmlDoc) {
 for (var i=0; i<geoXmlDoc.placemarks.length; i++) {
  if (geoXmlDoc.placemarks[i].polygon) {
    if (currentBounds.intersects(geoXmlDoc.placemarks[i].polygon.bounds)) {
      makeSidebarPolygonEntry(i);
    }
  }
 if (geoXmlDoc.placemarks[i].polyline) {
  if (currentBounds.intersects(geoXmlDoc.placemarks[i].polyline.bounds)) {
     makeSidebarPolylineEntry(i);
  }
}

}
}
sidebarHtml += "</table>";
 document.getElementById("sidebar").innerHTML = sidebarHtml;
}

function useTheData(doc){
var currentBounds = map.getBounds();
if (!currentBounds) currentBounds=new google.maps.LatLngBounds();
// Geodata handling goes here, using JSON properties of the doc object
sidebarHtml = '<table><tr><td><a href="javascript:showAll();">Show All</a></td></tr>';
//  var sidebarHtml = '<table>';
 geoXmlDoc = doc[0];
for (var i = 0; i < geoXmlDoc.placemarks.length; i++) {
// console.log(doc[0].markers[i].title);
var placemark = geoXmlDoc.placemarks[i];
if (placemark.polygon) {
  if (currentBounds.intersects(placemark.polygon.bounds)) {
    makeSidebarPolygonEntry(i);
  }
  var kmlStrokeColor = kmlColor(placemark.style.color);
  var kmlFillColor = kmlColor(placemark.style.fillcolor);
  var normalStyle = {
      strokeColor: kmlStrokeColor.color,
      strokeWeight: placemark.style.width,
      strokeOpacity: kmlStrokeColor.opacity,
      fillColor: kmlFillColor.color,
      fillOpacity: kmlFillColor.opacity
      };
  placemark.polygon.normalStyle = normalStyle;

  highlightPoly(placemark.polygon, i);
}
if (placemark.polyline) {
  if (currentBounds.intersects(placemark.polyline.bounds)) {
     makeSidebarPolylineEntry(i);
  }
  var kmlStrokeColor = kmlColor(placemark.style.color);
  var normalStyle = {
      strokeColor: kmlStrokeColor.color,
      strokeWeight: placemark.style.width,
      strokeOpacity: kmlStrokeColor.opacity
      };
  placemark.polyline.normalStyle = normalStyle;

  highlightPoly(placemark.polyline, i);
}


/*    doc[0].markers[i].setVisible(false); */
}
sidebarHtml += "</table>";
document.getElementById("sidebar").innerHTML = sidebarHtml;
};


function hide_kml(){

        geoXml.hideDocument();  

}

function unhide_kml(){

        geoXml.showDocument();  

}
function reload_kml(){
geoXml.hideDocument();
delete geoXml;
geoXml = new geoXML3.parser({
                map: map,
                singleInfoWindow: true,
                afterParse: useTheData,
                preserveViewport: true
});
geoXml.parse(filename); 

}


 function hide_polys_kml(){
 for (var i=0;i<geoXmlDoc.gpolylines.length;i++) {
   geoXmlDoc.gpolylines[i].setMap(null);
 }
}

function unhide_polys_kml(){
 for (var i=0;i<geoXmlDoc.gpolylines.length;i++) {
   geoXmlDoc.gpolylines[i].setMap(map);
 }
}
 function load_kmlLayer() {
 kmlLayer = new google.maps.KmlLayer(filename);
 google.maps.event.addListener(kmlLayer, "status_changed", function() {
   document.getElementById('kmlstatus').innerHTML = "Kml Status:"+kmlLayer.getStatus();
 });
 kmlLayer.setMap(map);
}
function hide_kmlLayer() {
 kmlLayer.setMap(null);
}
function show_kmlLayer() {
 kmlLayer.setMap(map);
}

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

    <div id="dmenu">
        <div id="hidden"><a href="javascript:;" onclick="toggle('dmenu');">  <img src="img/x.png"></a></div>
        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ODABERI KVART:
            <div id="sidebar">
    </div>
        </div>
            </div>
 </body>
</html>

解决方案

The simplest way to do this is to process through the Polygons in your "useTheData" function, which runs after the data is available after processing by geoxml3 and put the number of markers in the infowindow of the clicked polygon.

As you process the array of Placemarks to render the sidebar, also process each polygon to see how many markers it contains:

function useTheData(doc){
  var currentBounds = map.getBounds();
  if (!currentBounds) currentBounds=new google.maps.LatLngBounds();
  // Geodata handling goes here, using JSON properties of the doc object
  sidebarHtml = '<table><tr><td><a href="javascript:showAll();">Show All</a></td></tr>';
  geoXmlDoc = doc[0];
  for (var i = 0; i < geoXmlDoc.placemarks.length; i++) {
    var placemark = geoXmlDoc.placemarks[i];
    if (placemark.polygon) { // processing a polygon
      // polygon highlighting
      var kmlStrokeColor = kmlColor(placemark.style.color);
      var kmlFillColor = kmlColor(placemark.style.fillcolor);
      var normalStyle = {
          strokeColor: kmlStrokeColor.color,
          strokeWeight: placemark.style.width,
          strokeOpacity: kmlStrokeColor.opacity,
          fillColor: kmlFillColor.color,
          fillOpacity: kmlFillColor.opacity
          };
      placemark.polygon.normalStyle = normalStyle;

      highlightPoly(placemark.polygon, i);

      // new code  
      var markersInPoly = 0;
      for (var mrkr=0; mrkr<gmarkers.length; mrkr++) {
        if (google.maps.geometry.poly.containsLocation(gmarkers[mrkr].getPosition(),placemark.polygon)) {
            markersInPoly++;
        }
      }
      placemark.numMarkers = markersInPoly;
      if (currentBounds.intersects(placemark.polygon.bounds)) {
        makeSidebarPolygonEntry(i);
      }
      clickablePolygon(placemark, "contains "+markersInPoly+" markers"); 
    }
// rest of processing (note if you will never have polylines, you can remove that code).

Function to add the number of markers to the polygon's infowindow:

function clickablePolygon(placemark, info) {
  google.maps.event.addListener(placemark.polygon, "click", function(e) {
    if (e && e.latLng) {
      infowindow.setPosition(e.latLng);
    } else {
      infowindow.setPosition(placemark.polygon.bounds.getCenter());
    }
    infowindow.setContent('<div class="geoxml3_infowindow"><h3>' + placemark.name +
               '</h3><div>' + info + '</div></div>');
    infowindow.open(map);
  });
}

working proof of concept

这篇关于多边形或/和信息窗口中的标记簇编号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆